Links are the most basic interactive component between a user and a web page. They are so important, yet easily get lost in the midst of newer and shinier UI elements. Using nice CSS link style and hover effect will help to communicate to the user in a visual and meaningful way that this text is actionable. It makes it more enjoyable to click. So here are 36 CSS Link Styles & Hover Effects that you can use for inspiration to enhance the user experience of navigating your website or app.
Links / Buttons hover animations
Slice link text
Text animation
Arrowed link – circle on hover
Pure CSS Single Element Link Styles
The “Read more” link
New Link Underline (Wired-Style)
Link hover effect from factmag
Flag # links!
Link Style Experiments
Link with gradient background on hover
Link Effect – Squiggle
Simple, UX friendly pure-css links that open in a new tab
Towards a more perfect link underline
Cool (and easy) animated underline links.
Rolling Links
Animated font weight on hover
Pen By Jesper Strange Klitgaard Christiansen