hover CSS Effects — 2879 Free Examples (Page 10)

Live preview Cards

Game Cover Card

Video game box-art card with a title banner, rating badge and platform list.

#gradient #hover #shadow

Live preview Cards

Gift Card

Festive gift card with a satin ribbon bow and a soft shimmer sweep on hover.

#hover #gradient #transform

Live preview Cards

Glitch Card

Card with an animated RGB-split glitch effect on its title that fires on hover.

#gradient #animation #hover

Live preview Cards

Hearts Playing Card

Classic playing card with a large central heart and corner pips in red.

#hover #transform #shadow

Live preview Cards

Holographic Card

Iridescent holographic card that shimmers with a moving rainbow gradient on hover.

#gradient #animation #hover

Live preview Cards

Language Selector Card

Language selector card with current language and dropdown.

#hover #shadow #border

Live preview Cards

Neon Edge Card

Cyberpunk-style card with a pulsing neon outline and corner accents.

#animation #glow #hover

Live preview Cards

Neumorphic Card

Soft UI neumorphic card with dual light/dark shadows that presses in on hover.

#gradient #hover #shadow

Live preview Cards

Origami Fold Card

Card with diagonal origami fold panels that subtly shift on hover for a paper feel.

#gradient #hover #shadow

Live preview Cards

Peel Corner Card

Card whose top-right corner peels back on hover to reveal a hidden layer beneath.

#gradient #hover #3d

Live preview Cards

Polaroid Photo

Classic polaroid photo card with a white frame, image area and a handwritten caption.

#gradient #hover #3d

Live preview Cards

Pressable 3D Card

Chunky 3D card with a thick colored base that presses down flat on click.

#gradient #hover #3d

Live preview Cards

Pricing Card

Pricing tier card with feature list and a featured highlight badge that lifts on hover.

#gradient #hover #shadow

Live preview Cards

Profile Card

Profile card with an avatar that zooms and a stats bar that slides up on hover.

#gradient #hover #shadow

Live preview Cards

Shine Sweep Card

Card with a diagonal shine that sweeps across the surface on hover.

#gradient #animation #hover

Live preview Cards

Spades Playing Card

Royal spades playing card with an inverted heart pip and stern black ink.

#hover #transform #shadow

Live preview Cards

Stacked Layers Card

Stack of cards that fan out into separate layered panels on hover.

#gradient #hover #3d

Live preview Cards

Streaming Show Card

Streaming service show card with cinematic backdrop, title, and play overlay.

#hover #gradient #transform

Live preview Cards

Video Thumbnail

Video preview card with a play button overlay, duration badge, title and view count.

#gradient #hover #shadow

Live preview Forms

Action Button Dropdown

Primary action button with dropdown menu of secondary actions.

#hover #shadow #border

Live preview Forms

Avatar Dropdown

User dropdown with avatar and profile menu.

#hover #gradient #transform

Live preview Forms

Card Style Dropdown

Dropdown styled as elevated card with shadow.

#hover #transform #shadow

Live preview Forms

Clean Dropdown

Modern clean dropdown with custom arrow and subtle focus state.

#hover #shadow #border

Live preview Forms

Color Picker Dropdown

Dropdown with color swatches as options.

#hover #transform #border

Live preview Forms

Context Menu Dropdown

Right-click context menu style with action items.

#hover #shadow #border

Live preview Forms

Dark Dropdown

Dark themed dropdown with elevated focus state.

#hover #shadow #border

Live preview Forms

Date Range Dropdown

Date range picker dropdown with quick preset options.

#hover #transform #shadow

Live preview Forms

Emoji Picker Dropdown

Dropdown with emoji reactions as options.

#hover #transform #border

Live preview Forms

Fluent Dropdown

Microsoft Fluent design dropdown with subtle motion.

#hover #shadow #border

Live preview Forms

Light Dropdown

Light theme dropdown with clean white background.

#hover #shadow #border

Live preview Forms

Menu Dropdown

Context menu dropdown with icon options.

#hover #transform #shadow

Live preview Forms

Modern Dropdown

Sleek modern dropdown with elevation and accent color.

#hover #shadow #border

Live preview Forms

Multi-Select Chip Dropdown

Multi-select dropdown with chips for selected items.

#hover #transform #shadow

Live preview Forms

Outline Dropdown

Outline style dropdown with no fill background.

#hover #shadow #border

Live preview Forms

Pill Group Dropdown

Group of pill dropdowns for filter selection.

#hover #border

Live preview Forms

Popup Style Dropdown

Dropdown that opens a popup panel with detailed options.

#hover #transform #shadow

Live preview Forms

Rounded Dropdown

Pill-shaped dropdown with extra rounded corners.

#hover #shadow #border

Live preview Forms

Shadow Lift Dropdown

Dropdown that lifts with shadow on hover/focus.

#hover #transform #shadow

Live preview Forms

Square Dropdown

Sharp-cornered dropdown with minimal aesthetic.

#hover #border

Live preview Forms

Tags Input Dropdown

Dropdown with tag input for adding multiple values.

#hover #shadow #border

Live preview Forms

Tree Dropdown

Hierarchical tree dropdown for nested option selection.

#hover #transform #shadow

Live preview Forms

Chip Style Input

Input displayed as a removable chip.

#hover #transform #shadow

Live preview Forms

Coupon Code Input

Coupon code input with apply button.

#hover #transform #shadow

Live preview Forms

CVC Input

CVC security code input with lock icon.

#hover #transform #shadow

Live preview Forms

File Upload Input

Custom styled file upload input with icon.

#hover #border

Live preview Forms

File Drop Zone Input

Drag-and-drop file upload zone with dashed border.

#hover #transform #border

Live preview Forms

Number Input

Number input with custom styled steppers.

#hover #shadow #border

Live preview Forms

Number Stepper Input

Number input with custom increment/decrement buttons.

#hover #shadow #border

Live preview Forms

Password Input with Eye Toggle

Password input with CSS-only eye icon that reveals via :focus.

#hover #transform #shadow

Live preview Forms

QR Code Input

Input with QR code scan icon and dotted border.

#hover #transform #shadow

Live preview Forms

Range Slider Input

Range slider with custom styled thumb and track.

#hover #gradient #transform

Live preview Forms

Search Input with Clear Button

Search input that shows a clear (×) button when typed.

#hover #transform #shadow

Live preview Forms

Tag Input Field

Input that displays tags as removable chips.

#hover #shadow #border

Live preview Forms

Coupon Code Input

Coupon code input with apply button and dashed border.

#hover #transform #shadow

Live preview Forms

Gift Card Input

Gift card code input with gift icon and reveal toggle.

#hover #transform #shadow

Live preview Forms

Loyalty Points Input

Loyalty points input with balance display and redeem button.

#hover #gradient #shadow

Live preview Forms

Quantity Stepper Input

Quantity stepper with minus/plus buttons and current count.

#hover #border

Live preview Forms

Shipping Method Selector

Shipping method radio cards with delivery time and cost.

#hover #shadow #border

Live preview Forms

Subscription Plan Input

Subscription plan selector with monthly/annual toggle.

#hover #shadow #border

Live preview Forms

Tip Selector Input

Tip percentage selector with preset buttons and custom input.

#hover #shadow #border

Live preview Forms

Arrow Radio

Radio with arrow indicator that appears next to selected option.

#hover #transform

Live preview Forms

Button Group Radio

Radio styled as connected buttons in a toolbar group.

#hover #border

Live preview Forms

Chip Radio

Chip-style radio with subtle background fill when selected.

#hover #border

Live preview Forms

Circle Fill Radio

Classic radio with a centered dot that fills smoothly when selected.

#hover #transform #border

Live preview Forms

Dot Indicator Radio

Minimal radio with leading dot indicator that lights up.

#hover #transform #shadow

Live preview Forms

Emoji Radio

Radio with emoji reaction faces for satisfaction feedback.

#hover #transform #border

Live preview Forms

Fade Radio

Radio with smooth opacity fade on selection state.

#hover #transform #border

Live preview Forms

Flat Radio

Minimal flat radio with subtle accent dot when selected.

#hover #transform #border

Live preview Forms

Grid Radio

Radio options arranged in a 3-column grid for compact selection.

#hover #transform #border

Live preview Forms

Heart Radio

Radio styled as heart icon with bounce animation.

#hover #animation #transform

Live preview Forms

Magnetic Radio

Radio options that subtly attract when hovered and snap on select.

#hover #transform #shadow

Live preview Forms

Pill Radio Group

Horizontal pill radio options with smooth fill animation on selection.

#hover #shadow #border

Live preview Forms

Pills Row Radio

Pill-shaped radio row with smooth fill on selection.

#hover #shadow #border

Live preview Forms

Scale Radio

Selected radio option scales up its label text slightly.

#hover #gradient #transform

Live preview Forms

Segmented Radio

Segmented control radio with smooth sliding background indicator.

#hover #shadow #border

Live preview Forms

Star Rating Radio

Radio styled as star rating with hover glow.

#hover #transform #shadow

Live preview Forms

Thumbs Radio

Thumbs up/down radio feedback with smooth transition.

#hover #transform #filter

Live preview Forms

Underline Radio

Radio option with sliding underline indicator on selection.

#hover #transform #border

Live preview Forms

Search with Submit Button

Search bar with a submit button attached.

#hover #shadow #border

Live preview Forms

Search Bar with Clear

Search bar with a clear (×) button that appears when typing.

#hover #transform #shadow

Live preview Forms

Mic Search Bar

Search bar with a pulsing mic button on the right.

#hover #animation #transform

Live preview Forms

Pill Search Bar

Pink-accented pill-shaped search bar.

#hover #transform #shadow

Live preview Forms

Voice Search Bar

Search bar with a microphone icon for voice input.

#hover #transform #shadow

Live preview Forms

Modern Slider

Sleek modern slider with subtle shadow and rounded edges.

#hover #shadow #border

Live preview Forms

Rounded Slider

Range slider with rounded track and large rounded thumb.

#hover #gradient #transform

Live preview Forms

Custom Thumb Slider

Range slider with a custom-styled large thumb.

#hover #transform #shadow

Live preview Forms

Hover Lift Input

Input that lifts slightly with shadow on hover.

#hover #transform #shadow

Live preview Forms

Grouped Switch

Switch group with section header for settings panel.

#hover #transform #border

Live preview Forms

Stacked Switches

Vertically stacked switches for a settings list.

#hover #transform #border

Live preview Hover

3D Page Turn

Page-turn 3D effect on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Flip

3D combined zoom and flip on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Tilt Pop

3D pop with tilt and zoom on hover.

#hover #transform #3d

Live preview Hover

Acid Green Tint

Acid green tint pulses through on hover.

#hover #shadow

Live preview Hover

Afterimage Trail

Multiple ghost copies trail behind the label as it slides on hover.

#hover #transform #filter

Live preview Hover

Ambient Glow Fill

Ambient glow fills the surface on hover.

#hover #gradient

Live preview Hover

Aperture Iris Open

Camera aperture opens to reveal on hover.

#hover #gradient

Popular tags