← All elements
<button class="pr">Start free trial</button>About this button
A button that sends out soft expanding rings to draw the eye, with the animation switched off for reduced motion.
How it works
Two pseudo-elements share the button shape and a 2px border. Both run a keyframe that scales them outward while fading to zero, and the second starts half a cycle later so a ring is always visible. The reduced-motion query hides them entirely.
Ways to customise it
- Change the border colour for another brand.
- Adjust scale(1.5,1.9) for wider rings.
- Slow the 2.2s cycle for a calmer effect.
Good to know
Constant motion near a button can be distracting, so use it for one primary call to action only. The prefers-reduced-motion rule switches it off for people who need that.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.