INTERACTION_001CSS
Premium Button Lift
Weightless 2px rise with an edge highlight on hover.
Buttons / LightView
Back to library
INTERACTION_004
Sliding Arrow.
The cheapest premium signal available: an arrow glyph that nudges up-right on hover, implying travel before the click happens.
- CATEGORY
- Buttons
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
CSS / CSS
.link-arrow .arrow {
display: inline-block;
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.link-arrow:hover .arrow {
transform: translate(3px, -3px);
}