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.
