Epic Collection of Link Hover Effects

Image: Epic Collection of Link Hover Effects GIF

The default link style looks horrible on any web page but thankfully we have seen there are many awesome ways to style your link element. In today’s snippet designed by Thomas Aufresne we have 17 different styles to choose from.

The styles you can choose have the following effect on hover

1. underline stretches from left to right, and on moving away the line moves away from left to right
2. underline stretches from center to tips, and on moving away the line shrink from ends to the center
3. underline stretches from left to right, and on moving away the line moves away from right to left
4. underline stretches from left to right, and on moving away the line moves away from left to right
5. underline appears into view, and on moving away the line fades away
6. underline stretches from edges to center, and on moving away the line moves away from the center
7. top and bottom, left to right + reverse
8. top and bottom, left to right
9. top and bottom, right to left
10. top and bottom tips to center
11. top and bottom, appears and disappears
12. top and bottom, left to right + reverse
13. top and bottom, tips to center
14. button effect, center to edges
15. button effect, symmetrical
16. button effect, simultaneous
17. button effect, side by side

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen Links / Buttons hover animations by Thomas Aufresne (@origine) on CodePen.0