Hover Glow
悬停发光
Aliases:悬浮发光hover 发光按钮发光鼠标放上去发光边缘光晕glow effect
What is it
On hover, a soft glow blooms around the element's edges — an outer box-shadow or radial gradient tinted with the brand accent. Unlike a shadow's physical lift, glow signals energy and interactivity; common on dark UIs, gaming products and neon-style buttons.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Highlighting primary actions or icons on dark UIs
- Neon, gaming or sci-fi product tones
- Choose instead of hover-lift — avoid stacking both
✕ When not to use
- Low-contrast glow on light backgrounds — nearly invisible
- Large surfaces glowing wholesale — harsh and cheap-looking
- Dense utility interfaces — glow steals attention
Variants
Soft outer glow
柔和外发光
Large-blur accent box-shadow — the default
Border gradient
边框流光
Radial gradient tracing the border — more neon
Inner glow
内发光
Inset shadow glowing inward — suits dark cards
Implementation
box-shadowradial-gradienttransition:hoverBase recipe: `transition: box-shadow 200ms`, then on :hover stack two accent shadows (a 1px ring + a ~24px blur bloom). The border-gradient variant uses a pseudo-element with a radial gradient behind a mask, or animates background position. Tint the glow with the accent at 40–60% opacity; avoid pure white. Gate behind @media (hover:hover) for touch devices.
Compare
Full comparison →| Hover Glow悬停发光 | Hover Lift悬浮上浮 | |
|---|---|---|
| Intensity | Medium to strong — visually loud | Medium |
| Best for | Buttons / icons / dark cards | Cards / medium blocks |
| Mobile friendly | Poor — no hover on touch | Poor — no hover on touch |
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a hover glow to the project's primary action buttons. Inspect existing button hierarchy and accent tokens first; stay consistent. Requirements: - 1px ring + 24px accent glow on hover, 200ms transition - Glow only on primary buttons; secondary gets ring tint only - Only on hover-capable devices (@media hover:hover) - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
On hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionAlternativeWhen users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsApplies toA visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesUsed with