CSS Hover Effects

CSS Hover Effects

Zero-dependency, SSR-safe hover effect patterns for any webpage. Automatically matches effects to the existing design style.

Step 1 — Detect Design Style

Before choosing any effect, read the existing CSS and classify the design. Check these signals in order:

Signal Checklist

border-radius
  0–3px      → SHARP (corporate, enterprise)
  4–8px      → STANDARD (SaaS, neutral)
  12px+      → ROUNDED (consumer, friendly)

color saturation (look at primary/accent colors)
  muted, low-saturation (HSL s < 40%)  → MINIMAL
  moderate (40–70%)                    → STANDARD
  vivid, high-saturation (> 70%)       → BOLD

existing transitions
  none                → conservative, start subtle
  transition: all     → open to most effects
  specific property   → match their approach

spacing & density
  large padding/gaps  → marketing / hero page → bolder effects OK
  tight layout        → dashboard / app → subtle only

shadow usage
  no box-shadow       → FLAT design → avoid float-shadow
  has box-shadow      → ELEVATED → float-shadow fits
  
font style
  serif               → editorial / formal → no bouncy effects
  display / heavy     → bold brand → strong effects OK
  system-ui / sans    → neutral → match by other signals

Style Classification

After reading signals, pick ONE category:

Step 2 — Pick Effects from the Matrix

Effect × Style Compatibility Matrix

Rules:

• MINIMAL: max 2 effects per page, keep duration ≤ 250ms
• CORPORATE: only Background Fade, Underline, Border, subtle Float — nothing else
• DARK-PREMIUM: prioritize Glow and Shadow Radial over movement
• PLAYFUL: combine 2 effects (e.g. Pop + Background color change)
• Never use Wobble/Buzz on elements that appear more than 3× on one page

Step 3 — Effect Library (Copy-Ready CSS)

Use CSS custom properties to match the existing palette. Replace var(--accent) with the project's actual accent color.

CATEGORY: 2D Transitions

Float

Lifts element upward. Universal, works with all styles.

.hvr-float {
  --duration: 0.3s;
  transition: transform var(--duration) ease;
}
.hvr-float:hover {
  transform: translateY(-6px);
}

For MINIMAL: use translateY(-4px). For BOLD/PLAYFUL: use translateY(-8px).

Float Shadow

Float + matching shadow. Only use when design already has shadows.

.hvr-float-shadow {
  --duration: 0.3s;
  --shadow-color: rgba(0, 0, 0, 0.12);
  transition: transform var(--duration) ease,
              box-shadow var(--duration) ease;
}
.hvr-float-shadow:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px var(--shadow-color);
}

Tip: Set --shadow-color to a tinted version of the accent color for richer feel.

Grow

Subtle scale up. Safe on any element, good for cards and images.

.hvr-grow {
  transition: transform 0.2s ease;
}
.hvr-grow:hover {
  transform: scale(1.05);
}

Shrink

Scale down — signals "this is pressable". Good for icon buttons.

.hvr-shrink {
  transition: transform 0.2s ease;
}
.hvr-shrink:hover {
  transform: scale(0.94);
}

Pop

Spring-like scale with elastic overshoot. PLAYFUL and BOLD only.

.hvr-pop {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hvr-pop:hover {
  transform: scale(1.15);
}

Pulse Grow

Pulsing grow animation. Draws attention to a single CTA. Use sparingly — maximum one element per page.

.hvr-pulse-grow {
  animation: hvr-pulse-grow 0.4s linear infinite alternate;
}
@keyframes hvr-pulse-grow {
  to { transform: scale(1.06); }
}

Wobble Horizontal

Playful side-to-side shake. Tags, badges, fun UI only.

.hvr-wobble-horizontal:hover {
  animation: hvr-wobble-h 0.8s ease both;
}
@keyframes hvr-wobble-h {
  16.65% { transform: translateX(6px); }
  33.3%  { transform: translateX(-5px); }
  49.95% { transform: translateX(4px); }
  66.6%  { transform: translateX(-2px); }
  83.25% { transform: translateX(1px); }
  100%   { transform: translateX(0); }
}

Buzz

Rapid vibration. Alerts, error states, notification icons only.

.hvr-buzz:hover {
  animation: hvr-buzz 0.15s linear infinite;
}
@keyframes hvr-buzz {
  50% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(-2px) rotate(-1deg); }
}

Bob

Gentle floating bob animation. Always-on, not hover-triggered. For decorative hero elements, logo marks.

.hvr-bob {
  animation: hvr-bob 1.5s ease infinite;
}
@keyframes hvr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

CATEGORY: Background Transitions

Background Fade

Color wash on hover. The safest background effect — works everywhere.

.hvr-bg-fade {
  --bg-hover: rgba(99, 102, 241, 0.08); /* use accent at 8% opacity */
  transition: background-color 0.25s ease;
}
.hvr-bg-fade:hover {
  background-color: var(--bg-hover);
}

CORPORATE default. For table rows, menu items, list items.

Sweep To Right

Solid color sweeps in from left. Dramatic — BOLD and PLAYFUL only.

.hvr-sweep-right {
  --sweep-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hvr-sweep-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sweep-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.hvr-sweep-right:hover::before { transform: scaleX(1); }
.hvr-sweep-right:hover { color: white; }

Shutter In Horizontal

Split shutter opens from center. High-impact CTA buttons.

.hvr-shutter-in-h {
  --shutter-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.35s ease;
}
.hvr-shutter-in-h::before,
.hvr-shutter-in-h::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: var(--shutter-color);
  transition: transform 0.35s ease;
  z-index: -1;
}
.hvr-shutter-in-h::before { left: 0; transform: scaleX(0); transform-origin: left; }
.hvr-shutter-in-h::after  { right: 0; transform: scaleX(0); transform-origin: right; }
.hvr-shutter-in-h:hover::before,
.hvr-shutter-in-h:hover::after { transform: scaleX(1); }
.hvr-shutter-in-h:hover { color: white; }

Radial Out

Circular ripple expands from center. For image thumbnails and avatars.

.hvr-radial-out {
  --radial-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hvr-radial-out::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--radial-color);
  transform: scale(0);
  transition: transform 0.4s ease;
  z-index: -1;
}
.hvr-radial-out:hover::before { transform: scale(2.5); border-radius: 0; }
.hvr-radial-out:hover { color: white; }

CATEGORY: Border Transitions

Underline From Center

Line grows outward from center below text. Navigation links — universal.

.hvr-underline-center {
  --line-color: var(--accent, #6366f1);
  --line-height: 2px;
  position: relative;
}
.hvr-underline-center::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; right: 50%;
  height: var(--line-height);
  background: var(--line-color);
  transition: left 0.25s ease, right 0.25s ease;
}
.hvr-underline-center:hover::after { left: 0; right: 0; }

Underline From Left

Line slides in from left. More directional than center version.

.hvr-underline-left {
  --line-color: var(--accent, #6366f1);
  position: relative;
}
.hvr-underline-left::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 2px;
  background: var(--line-color);
  transition: right 0.25s ease;
}
.hvr-underline-left:hover::after { right: 0; }

Border Fade

Thin border appears on hover. Cards, panels, image containers.

.hvr-border-fade {
  --border-color: var(--accent, #6366f1);
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}
.hvr-border-fade:hover {
  border-color: var(--border-color);
}

Ripple Out

Border ripple expands outward. Circular buttons and icon buttons.

.hvr-ripple-out {
  --ripple-color: var(--accent, #6366f1);
  position: relative;
}
.hvr-ripple-out::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ripple-color);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hvr-ripple-out:hover::before {
  transform: scale(1.12);
  opacity: 1;
}

Reveal (underline reveal)

Text appears to uncover a colored bar beneath. Emphasis links.

.hvr-reveal {
  --reveal-color: var(--accent, #6366f1);
  position: relative;
  overflow: hidden;
}
.hvr-reveal::after {
  content: '';
  position: absolute;
  bottom: 0; left: -100%;
  width: 100%; height: 2px;
  background: var(--reveal-color);
  transition: left 0.3s ease;
}
.hvr-reveal:hover::after { left: 0; }

CATEGORY: Shadow & Glow

Glow

Colored glow on hover. Signature effect for DARK-PREMIUM style.

.hvr-glow {
  --glow-color: rgba(99, 102, 241, 0.5); /* use accent at 50% opacity */
  transition: box-shadow 0.3s ease;
}
.hvr-glow:hover {
  box-shadow: 0 0 18px var(--glow-color);
}

For dark backgrounds: increase opacity to 0.7. For light backgrounds: 0.3.

Shadow

Directional shadow on hover. Cards on white backgrounds.

.hvr-shadow {
  transition: box-shadow 0.3s ease;
}
.hvr-shadow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

Shadow Radial

Inward radial shadow — dramatic focus effect. DARK-PREMIUM only.

.hvr-shadow-radial {
  --glow: rgba(99, 102, 241, 0.35);
  transition: box-shadow 0.4s ease;
}
.hvr-shadow-radial:hover {
  box-shadow: 0 0 0 4px var(--glow), 0 0 40px var(--glow);
}

CATEGORY: Icons (with text)

Use these when a button or nav item contains both text and an icon.

Icon Forward

Icon slides right on hover. Navigation items with → arrows.

.hvr-icon-forward .icon {
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.hvr-icon-forward:hover .icon {
  transform: translateX(4px);
}

Icon Float

Icon floats up. Icon buttons in toolbars and sidebars.

.hvr-icon-float .icon {
  transition: transform 0.3s ease;
}
.hvr-icon-float:hover .icon {
  transform: translateY(-4px);
}

Icon Spin

Icon rotates on hover. Refresh, settings, loading icons.

.hvr-icon-spin .icon {
  transition: transform 0.3s ease;
}
.hvr-icon-spin:hover .icon {
  transform: rotate(90deg);
}

Icon Grow

Icon scales up while text stays still.

.hvr-icon-grow .icon {
  transition: transform 0.2s ease;
}
.hvr-icon-grow:hover .icon {
  transform: scale(1.3);
}

CATEGORY: Speech Bubbles (Tooltips)

Use when you need hover-triggered tooltip-style callouts.

Bubble Top

Tooltip appears above element on hover.

.hvr-bubble-top {
  position: relative;
}
.hvr-bubble-top::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #1a1a2e;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hvr-bubble-top::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  border: 5px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hvr-bubble-top:hover::before,
.hvr-bubble-top:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

Usage: <button class="hvr-bubble-top" data-tooltip="Click to save">Save</button>

CATEGORY: Curls

Curl Bottom Right

Page-curl effect at bottom-right corner. Creative / portfolio sites.

.hvr-curl-bottom-right {
  position: relative;
  overflow: hidden;
}
.hvr-curl-bottom-right::before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  background: linear-gradient(
    225deg,
    #fff 45%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.03) 56%, transparent 80%
  );
  transition: width 0.3s ease, height 0.3s ease;
  box-shadow: -1px -1px 4px rgba(0,0,0,0.1);
}
.hvr-curl-bottom-right:hover::before {
  width: 40px;
  height: 40px;
}

Step 4 — Composition Rules

Safe Combinations (use together on same element)

• Float + Border Fade
• Float Shadow + Grow (subtle grow only, max 1.03)
• Underline From Center + color transition on :hover
• Background Fade + Icon Forward
• Glow + Shadow Radial (DARK-PREMIUM only)

Never Combine

• Sweep + Float (compete for attention)
• Wobble + Buzz (too chaotic)
• Pulse Grow + any other animation (seizure risk)
• Curl + Background transition (visual conflict)

Duration Guidelines

MINIMAL style:     150–200ms  ease
CORPORATE style:   200–250ms  ease
STANDARD style:    200–300ms  ease
BOLD style:        250–350ms  ease
PLAYFUL style:     200–350ms  cubic-bezier(0.34, 1.56, 0.64, 1)

Accessibility

Always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Add this block once in the global stylesheet when applying hover effects.

Step 5 — Application Checklist

Before outputting code, verify:

• Detected design style and justified the choice
• Checked compatibility matrix before picking effects
• Used CSS custom properties tied to existing palette
• Applied prefers-reduced-motion block
• Max 1 animation-type effect per element (no stacking)
• Pulse Grow used on ≤ 1 element per page
• Wobble/Buzz used on ≤ 3 elements per page
• All position: relative + overflow: hidden prerequisites are in place

Quick Reference — Effect by Element Type