Log in

CSS Button Hover Effects: 4 Pure CSS Examples You Can Copy

By Purely CSS · Published October 9, 2026

A CSS button hover effect is a style change that plays when the pointer moves over a button, written with the :hover pseudo-class and a transition so the change is smooth. Here are four effects that work in every modern browser. Hover each demo to see it.

1. Lift with a soft shadow

Move the button up a few pixels and grow a colored shadow under it. The transition on transform and box-shadow makes it feel like the button is rising toward you.

<button class="btn-lift">Hover me</button>

2. Sliding fill

A pseudo-element sits behind the text and slides in from the left on hover. Hiding it with translateX and overflow hidden keeps the effect crisp, and the text color flips at the same time.

<button class="btn-fill">Hover me</button>

3. Glowing ring

Two stacked box-shadows draw a solid ring and a soft glow around a dark button. Only box-shadow changes, so there is no layout shift.

<button class="btn-glow">Hover me</button>

4. Gradient shift

Gradients cannot be transitioned directly, so make the background twice as wide and move background-position instead. The colors appear to flow across the button.

<button class="btn-grad">Hover me</button>

Tips

  • Always add a :focus-visible style as well, so keyboard users get the same feedback as mouse users.
  • Keep transitions between 150ms and 400ms. Longer feels sluggish.
  • Touch screens have no hover, so make sure the button is still clear and usable without the effect.

Common questions

How do I add a hover effect to a button with CSS?

Write the normal button style, then add the same selector with :hover and the changed properties, and add a transition so the change animates.

Can I transition a gradient background?

Not directly. Make the background larger with background-size, then transition background-position to make the colors shift.

Do hover effects work on mobile?

Touch devices have no true hover, so treat the effect as a bonus and keep the button obviously clickable without it.

Want more examples?

Browse the full collection of pure CSS buttons, or try your own code in the playground.

More guides