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:

| Style | Signals | Examples |
|-------|---------|---------|
| **MINIMAL** | muted colors + large radius + no shadow + system font | Notion, Linear, Vercel |
| **BOLD** | vivid colors + any radius + strong shadow + display font | Stripe, creative agencies |
| **PLAYFUL** | vivid colors + large radius + playful font + colorful palette | Duolingo, consumer apps |
| **CORPORATE** | muted/navy colors + small radius + tight density + no decoration | B2B SaaS, dashboards |
| **DARK-PREMIUM** | dark background + glow accents + medium radius | Raycast, Linear dark, dev tools |

---

## Step 2 — Pick Effects from the Matrix

### Effect × Style Compatibility Matrix

| Effect | MINIMAL | BOLD | PLAYFUL | CORPORATE | DARK-PREMIUM |
|--------|---------|------|---------|-----------|--------------|
| Float | ✅ | ✅ | ✅ | ✅ | ✅ |
| Float Shadow | ❌ (flat) | ✅ | ✅ | ❌ | ✅ |
| Glow | ❌ | ✅ | ✅ | ❌ | ✅ ★ best |
| Underline From Center | ✅ ★ best | ✅ | ✅ | ✅ | ✅ |
| Sweep To Right | ❌ (too dramatic) | ✅ | ✅ | ❌ | ❌ |
| Grow | ✅ | ✅ | ✅ | ✅ | ✅ |
| Pulse Grow | ❌ | ✅ | ✅ | ❌ | ❌ |
| Pop | ❌ | ✅ | ✅ ★ best | ❌ | ❌ |
| Wobble | ❌ | ✅ | ✅ | ❌ | ❌ |
| Buzz | ❌ | ✅ | ✅ | ❌ | ❌ |
| Background Fade | ✅ ★ best | ✅ | ✅ | ✅ ★ best | ✅ |
| Shutter In | ❌ | ✅ ★ best | ✅ | ❌ | ✅ |
| Border Fade | ✅ | ✅ | ✅ | ✅ | ✅ |
| Ripple Out | ❌ | ✅ | ✅ | ❌ | ✅ |
| Shadow Radial | ❌ | ✅ | ❌ | ❌ | ✅ ★ best |
| Curl | ❌ | ✅ | ✅ | ❌ | ❌ |
| Bubble (tooltip) | ✅ | ✅ | ✅ | ✅ | ✅ |

**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.
```css
.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

Element	MINIMAL	BOLD	PLAYFUL	CORPORATE	DARK-PREMIUM
Nav link	Underline Center	Sweep Right	Pop + color	Background Fade	Underline + Glow
Primary button	Grow + Border Fade	Shutter In	Pop	Background Fade	Glow
Secondary button	Border Fade	Sweep Right	Wobble	Border Fade	Border + Glow
Card	Float	Float Shadow	Pop + Shadow	Background Fade	Glow
Icon button	Icon Float	Icon Spin	Icon Grow	Icon Forward	Icon Float + Glow
Tag / badge	Grow	Pop	Pop + color	Background Fade	Grow
Image	Grow	Float Shadow	Float	Grow	Glow
Table row	Background Fade	Background Fade	Background Fade	Background Fade	Background Fade
Tooltip trigger	Bubble Top	Bubble Top	Bubble Top	Bubble Top	Bubble Top