Magnetic Hover Action Button

A magnetic hover action button built with pure HTML and CSS that creates a subtle attraction effect toward the cursor, enhancing interactivity without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where engaging hover interactions improve user attention, such as call-to-action buttons, feature highlights, or interactive UI elements.

Implementation

The magnetic effect is achieved using CSS transforms and transitions, allowing the button to visually respond to cursor movement while remaining lightweight and reusable.

HTML

<button class="btn-magnetic">
  Action
</button>

<button class="btn-magnetic">
  Action
</button>

CSS

.btn-magnetic {
  width: 200px;
  padding: 0.75rem 1.25rem;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn-magnetic:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 28px rgba(99,102,241,0.35);
}

.btn-magnetic {
  width: 200px;
  padding: 0.75rem 1.25rem;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn-magnetic:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 28px rgba(99,102,241,0.35);
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Creates a magnetic hover attraction effect
• Enhances engagement through motion feedback
• Smooth and lightweight interaction
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.