CSS-Only Ripple Effect

Sometimes we need visual feedback beyond what browsers provide for interactive elements by default. A common pattern is to shift the respective element’s position in activation state, making interactions more salient (and perhaps a little more satisfying).

a:active,
button:active {
    translate: 1px 1px;
}

Ahmad Shadeed’s Understanding Clip Path in CSS provides an approach to approximate Material Design’s more elaborate ripple effect with just a few lines of CSS – adapted here to provide a barebones implementation for reuse:

.ripple {
    --ripple: 0%;

    position: relative;
}
.ripple:is(:focus, :active) {
    --ripple: 100%;
}

.ripple::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentcolor;
    opacity: 0.5;
    clip-path: ellipse(var(--ripple) var(--ripple) at center);
}

@media (prefers-reduced-motion: no-preference) {
    .ripple::after {
        transition: clip-path 500ms ease-out;
    }
}

This might not always be a good idea though; such effects can easily become annoying. I typically only use it for simple demos.