Live preview Buttons
#hover CSS effects
3,025 free, pure-CSS effects match the "hover" tag. Each is copy-ready and needs no library or build step.
Effects tagged #hover
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Cards
Alert Banner
Warning alert card with a colored left border, circular icon and a call-to-action button.
Live preview Cards
Author Bio Card
Author bio card with a portrait avatar, name, role, and social links row.
Live preview Cards
Clubs Playing Card
Black clubs playing card with traditional three-lobed pip and clean white face.
Live preview Cards
Conic Glow Border
Card with a rotating conic-gradient border that glows around the edges.
Live preview Cards
Corner Peel Card
The top-right corner curls away like paper and reveals a coloured underside.
Live preview Cards
Cyberpunk Card
Neon-drenched cyberpunk card with corner brackets, scan lines and a glitch hover effect.
Live preview Cards
Depth Shadow Card
Card that lifts off the surface with a deep, color-matched drop shadow on hover.
Live preview Cards
Diamonds Playing Card
Crisp red diamonds playing card with rotated corner labels and bold center pip.
Live preview Cards
Feature Grid Card
Feature grid card with four icon tiles, each with a short label and accent color.
Live preview Cards
Live preview Cards
3D Flip Card
Card that rotates 180 degrees on the Y axis on hover to reveal a back face.
Live preview Cards
Game Cover Card
Video game box-art card with a title banner, rating badge and platform list.
Live preview Cards
Gift Card
Festive gift card with a satin ribbon bow and a soft shimmer sweep on hover.
Live preview Cards
Glitch Card
Card with an animated RGB-split glitch effect on its title that fires on hover.
Live preview Cards
Hearts Playing Card
Classic playing card with a large central heart and corner pips in red.
Live preview Cards
Holographic Card
Iridescent holographic card that shimmers with a moving rainbow gradient on hover.
Live preview Cards
Language Selector Card
Language selector card with current language and dropdown.
Live preview Cards
Neon Edge Card
Cyberpunk-style card with a pulsing neon outline and corner accents.
Live preview Cards
Neumorphic Card
Soft UI neumorphic card with dual light/dark shadows that presses in on hover.
Live preview Cards
Origami Fold Card
Card with diagonal origami fold panels that subtly shift on hover for a paper feel.
Live preview Cards
Peel Corner Card
Card whose top-right corner peels back on hover to reveal a hidden layer beneath.
Live preview Cards
Polaroid Photo
Classic polaroid photo card with a white frame, image area and a handwritten caption.
Live preview Cards
Pricing Card
Pricing tier card with feature list and a featured highlight badge that lifts on hover.
Live preview Cards
Profile Card
Profile card with an avatar that zooms and a stats bar that slides up on hover.
Live preview Cards
Shine Sweep Card
Card with a diagonal shine that sweeps across the surface on hover.
Live preview Cards
Slide Caption Card
A hidden caption panel slides up from the bottom edge when the card is hovered.
Live preview Cards
Spades Playing Card
Royal spades playing card with an inverted heart pip and stern black ink.
Live preview Cards
Spotlight Card
A soft radial spotlight fades in over the card surface while the pointer is on it.
Live preview Cards
Stacked Layers Card
Stack of cards that fan out into separate layered panels on hover.
Live preview Cards
Stacked Deck Card
Two shadow layers behind the card fan out like a hand of cards on hover.
Live preview Cards
Streaming Show Card
Streaming service show card with cinematic backdrop, title, and play overlay.
Live preview Cards
Tilt Glare Card
The card tips back in 3D while a soft glare sweeps over its surface.
Live preview Cards
Video Thumbnail
Video preview card with a play button overlay, duration badge, title and view count.
Live preview Checkboxes
OKLCH Mint Checkbox
Hover, checked and focus shades are all mixed from one OKLCH base in OKLAB space.
Live preview Checkboxes
OKLCH Ramp Checkbox
Rest, hover, checked and ring shades are one OKLCH hue mixed at four steps.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Multi-Select Chip Dropdown
Multi-select dropdown with chips for selected items.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Password Input with Eye Toggle
Password input with CSS-only eye icon that reveals via :focus.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
OKLCH Field States
Rest, hover and focus shades of one field are all mixed from a single OKLCH accent.
Live preview Forms
Live preview Forms
Live preview Forms
Loyalty Points Input
Loyalty points input with balance display and redeem button.
Live preview Forms
Live preview Forms
Shipping Method Selector
Shipping method radio cards with delivery time and cost.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Circle Fill Radio
Classic radio with a centered dot that fills smoothly when selected.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Magnetic Radio
Radio options that subtly attract when hovered and snap on select.
Live preview Forms
Pill Radio Group
Horizontal pill radio options with smooth fill animation on selection.
Live preview Forms
Live preview Forms
Live preview Forms
Segmented Radio
Segmented control radio with smooth sliding background indicator.