demo.html

<title>Demo Ripple Buttons</title>

<!-- Style -->
<link rel="stylesheet" type="text/css" href="ripple.css" />

<!-- Demo -->
<style>
/*  variant */
.text {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}
.text:hover {
    background-color: #ddd;
}

/* outlined */
.outlined {
    --ripple-background: black;

    border: 2px solid black;
    background-color: white;
    color: red;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
}

/* Optional */
a { 
    --ripple-background: black;
    --ripple-opacity: 0.1;
    --ripple-duration: 900ms;

    width: 106px;
    height: 36px;
    background: red;
    text-align: center;
    display: inline-block;
    padding-top: 14px;
}

/* page layout */
.contained {
    height: 50px;
    width: 100px;
    background-color: green;
}
.center {
    margin: auto;
    width: 60%;
    border: 3px;
    padding: 10px;
}
</style>

<div class="center">
    <button effect="ripple" class="outlined">Button</button>
</div>

<div class="center">
    <a href="#" effect="ripple">Button</a>
</div>

<div class="center">
    <button effect="ripple" class="contained">Button</button>
</div>

<div class="center">
    <button effect="ripple" class="text">Button</button>
</div>

<!-- Script -->
<script type="text/javascript" src="ripple.js"></script>