Magnetic Button

A button with a dramatic lift and shadow on hover using CSS transitions and @starting-style.

Published July 13, 2026

Demo

HTML
				
				<button class="mag-btn">Hover me</button>

CSS
				
				.mag-btn {
  transition:
    transform .3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow .3s ease;
}

.mag-btn:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 40px rgba(184, 255, 87, .35);
}

@starting-style {
  .mag-btn {
    transform: translateY(10px);
    opacity: 0;
  }
}

			

How it works

The lift effect uses transform: translateY(-6px) scale(1.04) on :hover with a cubic-bezier(0.34, 1.56, 0.64, 1) timing function — the Y₂ value above 1.0 creates a spring overshoot. A box-shadow with a large blur and spread grows on hover to simulate the button floating above the surface. @starting-style defines where the animation begins when the element first enters the DOM, creating a smooth entrance.