← Back to All Demos

Link Hover Effects

Animated link underline and fill effects. Five effect types with full color and timing control.

5
Effects
300
Default ms
0
Dependencies
01

Variation 01

Underline Left

Classic left-to-right underline reveal. The most popular link hover pattern on the web.

effect_type=underline-left
thickness=2px
hover_color=#3B82F6
duration=300
Hover Over Me
Hover Over Me
02

Variation 02

Underline Center

Underline expands from center outward. A balanced, symmetrical reveal effect.

effect_type=underline-center
thickness=2px
hover_color=#61ffc9
duration=300
03

Variation 03

Slide Fill

Background slides in from the left, revealing a full-color fill behind the text.

effect_type=bg-left
hover_color=#ffffff
effect_color=#3B82F6
duration=300
Hover Over Me
Hover Over Me
04

Variation 04

Custom Colors, Thick

Custom red color with a thick 4px underline and 6px offset. Bold and attention-grabbing.

effect_type=underline-left
thickness=4px
hover_color=#dc2626
offset=6
05

Variation 05

Slow Duration

Color shift effect with a leisurely 600ms duration. Elegant and subtle.

effect_type=color-shift
duration=600
hover_color=#8b5cf6
Hover Over Me

All Variations

01
Underline Left
effect_typeunderline-left
thickness2
duration300
hover_color#3B82F6
02
Underline Center
effect_typeunderline-center
thickness2
duration300
hover_color#61ffc9
03
Slide Fill
effect_typebg-left
duration300
hover_color#ffffff
04
Custom Colors, Thick
effect_typeunderline-left
thickness4
duration300
hover_color#dc2626
05
Slow Duration
effect_typecolor-shift
duration600
hover_color#8b5cf6