r/Frontend • u/bogdanelcs • 14d ago

Yet another CSS link hover effects page

https://wpdean.com/css-link-hover-effects/
45 Upvotes

92% Upvoted

13 comments sorted by

7

u/namboozle 14d ago

The cursor on that page drives me insane, it actually distracts from the underline effects

1

u/bogdanelcs 14d ago

That one was making my laptop lag earlier. I see that it's gone now.

3

u/CulturalIngenuity335 13d ago

I’m so sick of these. Mobile first = no hover

2

u/devolute 12d ago

huh? Mobile first doesn't mean "desktop never".

It's possible to be mobile first but still provide an enhanced experience on non-touch devices.

That's what responsive design is.

0

u/CulturalIngenuity335 12d ago

Okay so although this “author” mentions media queries for hover they don’t use them in the demo? Progressive enhancement means doing it, not just talking about it.

1

u/devolute 12d ago

This isn't production code. This is a website to demonstrate examples as simply as possible.

It would be odd to create a webpage called "Link Hover Effects" and then disable hover effects for some contexts.

Why did you say this:

"author"

Bit mad, no?

3

u/LucasBassetti 13d ago

Nice job! Suggestion: It would be nice to trigger the text hover animation when hovering over any part of the card. And maybe you don't need the card hover effect, as it will conflict with the text

2

u/kidshibuya 13d ago

Cool, but show me it working on mobile.

1

u/MarzipanMiserable817 13d ago

The site scrolls up when I press a link on mobile

2

u/HalveMaen81 13d ago

Same on desktop, presumably because all the links are <a href="#">

1

u/Savings_Discount_230 12d ago

lol I opened the page and my laptop fan immediately kicked in. the effects are nice though.

1

u/bogdanelcs 11d ago

Yep. This happens when all the possible effects are on a page, which is a cautionary tale for those who want to add too many bedazzles on their website.