← All elements
<a class="rw" href="#"><span>Hover me</span></a>About this button
A button that fills with an animated rolling wave on hover, using a rotating rounded shape clipped by the button.
How it works
A large circle with a border-radius of 42 percent rests below the button and rotates slowly, which makes its top edge look like a wave. The button has overflow hidden, so only the part inside shows. On hover the circle rises by changing its top value, and the wave fills the button while the text colour switches for contrast.
Ways to customise it
- Change #38bdf8 for the outline, wave and text colours.
- Edit the 0.7s rise time.
- Change the 4s rotation speed to make a choppier or calmer wave.
Good to know
The wave also rises on keyboard focus. The rotation stops under reduced motion. Keep enough contrast between text and the filled colour.
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.