🍱 Lunchbox Hands

CSS Button Hover Effects

12 copy-paste button hover animations with live preview

12 ready-made CSS button hover effects — fill sweeps, glow, border draw, shine, ripple, and more. Pick one, set your colors and radius, and copy the CSS and HTML. Hover the previews to try them.

Fill Sweep
Fill Bottom-Up
Glow
Border Draw
Underline Slide
Lift & Shadow
Shine Sweep
Ripple (on click)
Pulse
Outline Expand
Background Slide
Arrow Nudge

Hover (or click, for Ripple) the button to see the effect.

px
s
#6366f1
#ffffff
.lb-btn-fill-sweep {
  position: relative;
  padding: 0.75em 1.75em;
  border: 2px solid #6366f1;
  border-radius: 8px;
  background: #6366f1;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  background: transparent;
  color: #6366f1;
  z-index: 0;
}
.lb-btn-fill-sweep::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #6366f1;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.lb-btn-fill-sweep:hover { color: #ffffff; }
.lb-btn-fill-sweep:hover::before { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .lb-btn-fill-sweep, .lb-btn-fill-sweep::before, .lb-btn-fill-sweep::after {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips