Stats
Actions
Tags
From css-skills
Automatically detects a webpage's design style and applies matching pure-CSS hover effects for navigation, cards, buttons, icons, and more. Zero JS, zero dependencies, SSR-safe.
How this skill is triggered — by the user, by Claude, or both
Slash command
/css-skills:css-hover-effectsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Zero-dependency, SSR-safe hover effect patterns for any webpage.
Zero-dependency, SSR-safe hover effect patterns for any webpage. Automatically matches effects to the existing design style.
Before choosing any effect, read the existing CSS and classify the design. Check these signals in order:
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
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 |
| 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:
duration ≤ 250msUse CSS custom properties to match the existing palette.
Replace var(--accent) with the project's actual accent color.
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 + 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.
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);
}
Scale down — signals "this is pressable". Good for icon buttons.
.hvr-shrink {
transition: transform 0.2s ease;
}
.hvr-shrink:hover {
transform: scale(0.94);
}
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);
}
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); }
}
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); }
}
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); }
}
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); }
}
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.
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; }
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; }
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; }
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; }
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; }
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);
}
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;
}
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; }
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.
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);
}
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);
}
Use these when a button or nav item contains both text and an icon.
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 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 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 scales up while text stays still.
.hvr-icon-grow .icon {
transition: transform 0.2s ease;
}
.hvr-icon-grow:hover .icon {
transform: scale(1.3);
}
Use when you need hover-triggered tooltip-style callouts.
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>
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;
}
:hoverMINIMAL 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)
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.
Before outputting code, verify:
prefers-reduced-motion blockposition: relative + overflow: hidden prerequisites are in place| 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 |
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
npx claudepluginhub dabaibian/css-skills