Hover Effects
Combine transitions and transforms for interactive UI.
Syntax
.card { transition: all 0.3s; } .card:hover { transform: translateY(-6px); }Interactive effects come from combining a :hover state with a transition. This is how cards lift, buttons glow, and images zoom.
Keep effects subtle so they enhance usability rather than distract.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer combines transform: translateY and box-shadow transition on a card to create a hover lift effect that indicates clickability.
- A designer uses a pseudo-element with transform: scaleX that grows from 0 to 1 on hover to create an underline slide-in for nav links.
- A developer applies a background-size transition on a button with gradient background so the gradient appears to sweep across the button on hover.
More examples
Card lift on hover
Lifts a card upward and deepens its shadow on hover to communicate interactivity through combined transforms and shadows.
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Animated underline for nav links
Uses a pseudo-element and scaleX transform to animate a brand-blue underline that sweeps from left to right on hover.
.nav-link {
position: relative;
text-decoration: none;
color: #1a1a2e;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px; left: 0;
width: 100%; height: 2px;
background: #2965f1;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.nav-link:hover::after {
transform: scaleX(1);
}Background sweep button effect
Creates a fill-sweep button where a colored background slides in from right to left and text color inverts on hover.
.btn-sweep {
background: linear-gradient(to right, #2965f1 50%, transparent 50%);
background-size: 200% 100%;
background-position: right;
border: 2px solid #2965f1;
color: #2965f1;
padding: 10px 24px;
transition: background-position 0.35s ease, color 0.35s ease;
}
.btn-sweep:hover {
background-position: left;
color: #fff;
}
Discussion