ADVERT

🖱️ Button Hover Effects

Design interactive button hover states with border wipe, glow trail, and micro-motion presets. Adjust colors, radius, timing, and copy production-ready CSS.

Effect style

Animated border sweep that traces the outline of the button.

Button label

Font size16px

Border radius14px

Transition speed320ms

Background#111827

Text#F9FAFB

Accent#3B82F6

CSS

.button-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  border-radius: 14px;
  border: 2px solid transparent;
  background: #111827;
  color: #f9fafb;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 320ms ease, box-shadow 320ms ease, background 320ms ease, color 320ms ease;
}

.button-hover:focus-visible {
  outline: 3px solid #3b82f633;
  outline-offset: 3px;
}

.button-hover::before,
.button-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.button-hover .arrow {
  display: inline-flex;
  transition: transform 320ms ease;
}

.button-hover.border-wipe {
  border-color: #3b82f655;
}

.button-hover.border-wipe::after {
  border: 2px solid #3b82f6;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms ease;
}

.button-hover.border-wipe:hover::after,
.button-hover.border-wipe:focus-visible::after {
  transform: scaleX(1);
}

.button-hover.border-wipe:hover .arrow,
.button-hover.border-wipe:focus-visible .arrow {
  transform: translateX(6px);
}

ADVERT

More like this

Generate neumorphic soft UI effects with adjustable shadows, blur, border radius, and inset mode. Copy CSS code instantly.

Generate glassmorphism CSS with background transparency, blur, border radius, and frosted glass effects. Copy CSS code instantly.

Experiment with flexbox layouts in real time. Adjust direction, wrapping, alignment, and gaps visually, then copy clean CSS for your own UI layouts.

Plan component-level breakpoints, preview how layouts respond to container width changes, and copy production-ready CSS container queries with matching markup.

Build fluid typography with ease. Enter min/max font sizes and viewport breakpoints to produce a precise CSS clamp() font-size formula with live preview.

Create multi-step CSS animations with translate, rotate, scale, and opacity controls. Preview the timeline and copy clean keyframe CSS.

Define bezier control points, visualize the curve, and export production-ready CSS offset-path animations with configurable timing, iterations, and offset-rotate.

Design scroll-driven reveal effects, map scroll ranges, and export modern @scroll-timeline CSS alongside IntersectionObserver fallbacks for wider browser support.

ADVERT