Small JS · pointerdown · scale
Ripple
Every press sends a ring of accent colour out from the exact point you touched. Satisfying feedback.
- Class
.CCRipple- Weight
- 1.0 KB
- Needs
- CSS + a few lines of JS
- Best for
- Buttons, toggles, menu items, mobile
Tune it
Every snippet on this page follows these settings.
How Ripple works
- On pointerdown, a circle twice the element's size is added, centred on the touch point.
- It starts at scale(0) and grows to full size while fading out.
- overflow: hidden clips it to the element's shape, rounded corners included.
- It removes itself when the animation ends.
Add it to your site
- Add the styles. Link
https://coyoteconcept.com/lab/cc-lab.cssonce, or paste the CSS from any snippet below. - Set a colourway. Wrap your content in
class="CCTheme CCEmber", or any other colourway. - Add the classes. For example
<button class="CCButton CCRipple">. - Add the script. Include
https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.
Core components
Ripple on button, toggle, tabs, card, dropdown.
More ways to use it
The same class on nav bar, image card, badge.
Pairs well with
Avoid on the same element Ember Sparks (clipping).
Browser support
| Chrome & Edge | 111+ |
|---|---|
| Safari | 16.2+ |
| Firefox | 113+ |
Older browsers show the element without the effect: nothing breaks.
Accessibility
- Feedback only: the click behaves exactly as before.
- Works with touch, mouse and pen.
Performance
- 1.0 KB of code, no libraries.
- Animates transforms, opacity and gradients, which browsers handle cheaply.
- This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.
Questions about Ripple
How do I add Ripple to a button?
Add the class CCRipple next to CCButton, inside an element with the CCTheme class, then include the Ripple CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.
Does Ripple need JavaScript?
Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.
Which browsers support Ripple?
Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.
Is Ripple accessible?
Feedback only: the click behaves exactly as before. Works with touch, mouse and pen.