← All elements
<a class="wl" href="#">Hover this link</a>About this hover effect
A link with a wavy underline that animates sideways on hover, drawn with a repeating radial-gradient background.
How it works
The underline is an ::after element with a repeating radial-gradient that draws a row of small arcs, 12 pixels wide each. On hover or focus the background-position is animated forever, so the waves seem to flow sideways. Without hover the line is a calm static wave.
Ways to customise it
- Change #ca8a04 to colour the wave.
- Edit the 12px width for tighter or wider waves.
- Change the 1s duration to flow faster or slower.
Good to know
Underlines help people see a link, and this one also appears on focus. It stops moving under reduced motion. It is a normal link, so keep a clear href.
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.