A hover effect that adds a soft surface glow to indicate focus without borders or layout change.
HTML
<div class="hover-glow">
Glow Hover
</div>CSS
.hover-glow {
width: 200px;
padding: 0.75rem 0;
border-radius: 14px;
background: #DCD6F7;
color: #111827;
font-size: 13px;
text-align: center;
box-shadow: 0 0 0 rgba(99,102,241,0);
transition: box-shadow 200ms ease, background 150ms ease;
}
.hover-glow:hover {
background: #eef2ff;
box-shadow: 0 0 0 6px rgba(99,102,241,0.25);
}
@media (prefers-color-scheme: dark) {
.hover-glow {
background: #020617;
color: #e5e7eb;
}
.hover-glow:hover {
background: #1e1b4b;
box-shadow: 0 0 0 6px rgba(129,140,248,0.35);
}
}Notes
- No borders or outlines
- Soft, accessible focus cue
- Ideal for cards and controls
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.