---
title: "CSS Hover Effects: Button & Card Hover Animations"
description: "Eight free CSS hover effects: lift, grow, glow, shine, border draw, underline slide, 3D tilt, and gradient shift. Pure CSS, copy-paste ready."
url: https://frontendhelpers.com/css-hover-effects
updated: 2026-10-12
---

# CSS hover effects

Lifts, glows, shine sweeps, underline slides and 3D tilts — hover any card below to see the effect, then copy the CSS.

## The code for all 8 hover effects, explained

Every effect above, with the markup to use and the complete CSS. Each one is self-contained: paste the CSS once, add the class, done.

### Lift

The standard card hover in modern SaaS design: rise slightly, cast a deeper shadow. Transition both properties together.

Markup

```html
<div class="card fh-hover-lift">Card content</div>
```

CSS

```css
.fh-hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fh-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.45);
}
```

### Grow

The springy cubic-bezier overshoots slightly, which reads as eager rather than mechanical.

Markup

```html
<button class="fh-hover-grow">Click me</button>
```

CSS

```css
.fh-hover-grow {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fh-hover-grow:hover {
  transform: scale(1.08);
}
```

### Glow

A soft neon halo for dark UIs. Match the glow colour to your brand accent.

Markup

```html
<button class="fh-hover-glow">Get started</button>
```

CSS

```css
.fh-hover-glow {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.fh-hover-glow:hover {
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.65);
  border-color: rgba(139, 92, 246, 0.8);
}
```

### Shine Sweep

A light streak sweeps across the element, like light catching glass. The parent needs overflow: hidden.

Markup

```html
<button class="fh-hover-shine">Buy now</button>
```

CSS

```css
.fh-hover-shine {
  position: relative;
  overflow: hidden;
}
.fh-hover-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.fh-hover-shine:hover::after {
  left: 130%;
}
```

### Border Draw

An accent border snaps into place from slightly outside the element. border-radius: inherit keeps it matching any shape.

Markup

```html
<button class="fh-hover-border">Learn more</button>
```

CSS

```css
.fh-hover-border {
  position: relative;
}
.fh-hover-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #06b6d4;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.15);
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.fh-hover-border:hover::before {
  opacity: 1;
  transform: scale(1);
}
```

### Underline Slide

The underline grows from the left instead of just appearing — the detail that separates polished nav links from defaults.

Markup

```html
<a href="#" class="fh-hover-underline">About us</a>
```

CSS

```css
.fh-hover-underline {
  position: relative;
  text-decoration: none;
}
.fh-hover-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fh-hover-underline:hover::after {
  transform: scaleX(1);
}
```

### 3D Tilt

A fixed-angle 3D tilt with zero JavaScript. For cursor-tracking tilt you need JS — but this covers 80% of the effect.

Markup

```html
<div class="card fh-hover-tilt">Card content</div>
```

CSS

```css
.fh-hover-tilt {
  transition: transform 0.3s ease;
}
.fh-hover-tilt:hover {
  transform: perspective(600px) rotateX(8deg) rotateY(-10deg) scale(1.03);
}
```

### Gradient Shift

The gradient slides rather than swaps — animating background-position is smooth, while animating background colours directly is not.

Markup

```html
<button class="fh-hover-gradient">Get started</button>
```

CSS

```css
.fh-hover-gradient {
  background: linear-gradient(120deg, #8b5cf6, #06b6d4, #10b981);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: background-position 0.5s ease;
  color: #fff;
}
.fh-hover-gradient:hover {
  background-position: 100% 50%;
}
```

## Hover effects are feedback, not decoration

A hover state answers a question the user is already asking: _is this thing clickable?_ That's why the most effective hover effects are subtle and instant — they confirm interactivity rather than performing. A card that lifts 4px on hover communicates "you can click me" more clearly than one that spins.

Keep durations short. Interface feedback belongs in the **150–300ms** range; anything slower feels laggy because the user has already decided to click. Save longer, more elaborate motion for entrances, where there's no pending interaction to delay.

## The critical caveat: hover doesn't exist on touch

Roughly half of web traffic has no hover at all. On touch devices, a hover state typically fires on tap — after the user has already committed — so any information you hide behind hover is effectively invisible to them.

The rule that follows: hover may _enhance_, never _reveal_. If a caption, a menu, or a "delete" button only appears on hover, mobile users can't reach it. Where you need hover-only styling, scope it with `@media (hover: hover)` so touch devices skip it entirely rather than getting a sticky stuck-on state.

## Always pair hover with focus

Keyboard users never trigger hover. Every hover effect on an interactive element should have a matching `:focus-visible` style, or the entire interface becomes untraceable when tabbing through it. Writing `a:hover, a:focus-visible { … }` costs nothing and is a WCAG requirement, not a nicety.

## Why these effects stay smooth

Each effect here transitions `transform`, `opacity`, `box-shadow` or `background-position` — properties the browser can handle without recalculating layout. Animating `width`, `height`, `margin` or `top` on hover forces layout on every frame and is the usual cause of janky hover states on lower-powered devices.

## Frequently asked questions

### Do CSS hover effects work on mobile?

Not meaningfully. Touch devices have no hover, and the state usually fires on tap after the user has committed. Use hover to enhance, never to reveal content, and scope hover-only styles with @media (hover: hover).

### How long should a hover transition be?

Between 150 and 300 milliseconds. Interface feedback needs to feel instant — longer transitions feel sluggish because the user has already decided to click before the animation finishes.

### Should hover effects also apply on keyboard focus?

Yes. Keyboard users never trigger hover, so pairing every hover rule with :focus-visible is what keeps an interface navigable by keyboard — and it is a WCAG requirement, not an optional extra.

## Related categories

- [CSS Flip Card: 3D Card Flip on Hover, Focus and Click](https://frontendhelpers.com/css-flip-card): Build a CSS flip card with perspective, preserve-3d and backface-visibility. Stack faces with grid, flip on focus or a button, respect reduced motion.
 
- [CSS Hover Underline Animations That Work With Wrapping](https://frontendhelpers.com/css-hover-underline-animation): Animate link underlines with ::after and scaleX, a background-size gradient that survives line wraps, or text-decoration transitions, accessibly.
 
- [Animated Gradient Borders in CSS: 3 Techniques](https://frontendhelpers.com/css-animated-gradient-border): Three ways to build a gradient border in CSS, with live demos: border-image, clipped backgrounds and a conic pseudo-element, animated with @property.
 
- [Menus & Dropdowns](https://frontendhelpers.com/css-menu-animations): Dropdowns, staggered items and hamburger morphs
 
- [Forms & Inputs](https://frontendhelpers.com/css-form-animations): Focus glows, floating labels and toggles
 
- [Images & Carousels](https://frontendhelpers.com/css-image-animations): Hover zooms, greyscale reveals and caption slides