Surface Lift Hover Effect

This hover effect lifts the surface slightly and increases contrast to indicate interactivity without visual noise.

HTML

<div class="hover-lift">
  Hover Me
</div>

<div class="hover-lift">
  Hover Me
</div>

CSS

.hover-lift {
  width: 200px;
  padding: 0.7rem 0;
  border-radius: 16px;
  background: #0046FF;
  color: #e5e7eb;
  font-size: 12px;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  background: #4E56C0;
  box-shadow: 0 14px 28px rgba(0,0,0,0.6);
}

.hover-lift {
  width: 200px;
  padding: 0.7rem 0;
  border-radius: 16px;
  background: #0046FF;
  color: #e5e7eb;
  font-size: 12px;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  background: #4E56C0;
  box-shadow: 0 14px 28px rgba(0,0,0,0.6);
}

Notes

• Clear elevation cue
• No layout shift
• Suitable for cards and tiles

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.