← All elements
<button class="gs">Get started</button>About this button
A call-to-action button with an oversized gradient background that glides sideways on hover.
How it works
The background is a four-stop gradient stretched to 300 percent of the button width, so only a third of it is visible. Hovering moves background-position from the left edge to the right edge, which slides the hidden colours into view, while a small translateY lifts the button.
Ways to customise it
- Swap the four colours in the linear-gradient.
- Change background-size to 200% for a subtler shift.
- Lengthen the .7s transition for a slower glide.
Good to know
Keep text contrast high on every stop of the gradient, not just the first. The focus-visible outline keeps keyboard users oriented. Animating background-position is cheap and works in every current browser.
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.