← All elements
<button class="as"><span>Continue</span><i></i></button>About this button
The label slides aside to make room for an arrow that glides in from the left when you hover.
How it works
The arrow is a rotated square with only two borders, placed at the right edge with zero opacity and shifted left. Hovering raises its opacity, slides it into place and widens the right padding so the label shifts aside without the button jumping around.
Ways to customise it
- Change #5eead4 to recolour the arrow.
- Increase the padding values on hover for more travel.
- Use a rounded rectangle instead of a pill by lowering border-radius.
Good to know
The arrow is decorative, so the label still carries the meaning. Padding transitions can cause small layout shifts, which is fine for a button that is sized by its own content.
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.