Material Design: Ripple: Step-by-step tutorial

The Material Design Ripple example recreates the touch ripple effect found in Google's Material Design components. The ripple creates visual feedback when users interact with a button, expanding outward from the point of touch.

In this tutorial, we'll use two Motion APIs: animate to create the ripple animations and hover to handle button hover states.

Get started

Let's start with a simple button and the basic HTML structure we need for the ripple effect.

<button class="md-button">
    Click me<span class="ripple-container" aria-hidden></span>
</button>

<script type="module">
    // We'll add our JavaScript here
</script>

<style>
    /** Copy from example source */
</style>

The key to our ripple setup is the .ripple-container element inside the button. This acts as a clipping mask - any ripples we create will be contained within the button's rounded corners. We use pointer-events: none so clicks pass through to the button itself.