Links & Hover Effects – 8 Free CSS Sets
Links & Hover Effects is a pack of eight sets: underline styles, animated underlines, link states, call-to-action links, card hovers, image hovers, navigation links and dark-interface variants. Pure CSS, built on the real underline properties rather than border hacks.
At a glance
- 8 sets, one folder each, single
index.htmlper set - Pure CSS — no JavaScript, no dependencies
- Uses
text-decoration-thickness,text-underline-offsetandtext-decoration-skip-ink - Covers all five link states, including
:focus-visible - Card and image hovers wrap the whole tile in one anchor — one tap target, one tab stop
FAQ
Are these link and hover effects free?
Yes. All eight sets are free for personal and commercial projects, including client work, and download as a single ZIP with no signup.
How do I style an underline in CSS?
Use text-decoration-thickness and text-underline-offset on the link, and leave text-decoration-skip-ink at its default so the line breaks around descenders. The border-bottom approach cannot do either and should be retired.
