← All elements
<a class="gb" href="#"><span>Explore</span></a>About this button
An outlined button that fills with colour from left to right on hover, driven by a pseudo-element and transform.
How it works
An outlined link has a ::before pseudo-element that covers it. The pseudo-element is scaled to zero width with transform-origin: left, and on hover it scales to full width, filling the button with colour from left to right. The text colour changes at the same time so it stays readable on the new background.
Ways to customise it
- Change #34d399 for the outline and fill colour.
- Set transform-origin to right to sweep the other way.
- Change the 0.35s duration.
Good to know
Hover and focus-visible both trigger it. Make sure the text colour on the filled state has enough contrast. Scaling a pseudo-element is cheap to animate.
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.