6 ms·
Creative Link Effects - Subtle and modern effects for links or menu items
- anisa555 13y agovery Creative good stuff
- luscious 13y agoCan't hover with touch.
- NKCSS 13y agoThe other two examples are very much worth the time to check out as well (links at the bottom of the page).
- wehadfun 13y agoMost of these are great. I loved the one that showed a little extra text when hovered over. I did not like the ones that caused the link to be disappear or tilt in a way that caused it to be ilagable
- tbrownaw 13y agoWhat do you mean "subtle" and "modern"? I'd go with something more like "gaudy" and "distracting". Links should be blue and underlined, and visited or hovered-over links should be purple and still underlined. (Or some other pair of colors, that makes links stand out from non-links, and visited links look "faded" compared to non-visited links.) Distracting special effects just show off you 1337 web skillz and detract from whatever made your site worth visiting.
- malandrew 13y agoUggh. Token middlebrow dismissal. If that is how you feel, just browse the internet with CSS turned off or with your own style sheet overriding the site's own style sheet. If you use chrome, try this: [0]https://chrome.google.com/webstore/detail/user-stylesheet/nlfpnjpcddafclelkbgijfpdanaacdcp?hl=en https://chrome.google.com/webstore/detail/user-stylesheet/nl...
- normloman 13y agoNo. Keeping links colored and underlined is a good idea. User interfaces shouldn't reinvent the wheel. They should respect standards so users don't have to relearn commands every time they switch programs. Same for websites: Keep it familiar.
- Zikes 13y agoI think it's fairly obvious that these effects aren't intended for body copy links, rather for header navigation and the like. In those cases, such as when they appear in a navigation bar at the top of the page, their utility is already obvious and there is plenty of room for differentiation.
- normloman 13y agoFair point. Nav bars don't need underlining.
- tbrownaw 13y agoUggh. Token middlebrow dismissal. So, that means you disagree but can't articulate why? If that is how you feel, just browse the internet with CSS turned off If you had ever actually tried this, you'd know it's completely bullshit advice. or with your own style sheet overriding the site's own style sheet. Because the proper solution to shitty website UIs is to force everyone to jump thru hoops to fix them individually, rather than to rant at the webdevs in the hops that they think about things from the users' perspective rather than just "hey, that looks cool"? It should be immediately apparent that links are links. It is generally helpful if visited and non-visited links are different. For some things (say, a list of product categories) this is less important. Fancy hover effects are annoying. They're slow, if the effect looks like replacement I need to re-read the caption to see that it's still the same, the eye-catchingness makes it impossible to look at something next to it until the animation finishes (this is especially bad for any effects set for when the hover ends).
- malandrew 13y ago
- crazygringo 13y agoSeveral of these are actually quite nice. Granted, they're definitely not link styles to be used "generally", in body text, etc. -- but for an appropriately image-conscious site, they could work particularly in a site header, for example. Unfortunately it's hard to comment on them individually since they don't really have "names"... but "Wafture", and "Chatoyant" (against red) are particularly nice and tasteful.
- Splendor 13y agoEach example is numbered in the source code. The two you mentioned are "effect-1" and "effect-12".
- diminish 13y agoDid anyone understand how to implement them? are they JS or CSS or both based?
- nfriedly 13y agoAll CSS. Most of them use the :before and :after content trick to insert extra text on the page. Some of the more unique ones use a data-hover attribute with a copy of the link text so that they can show two copies of the same text at the same time and style them differently. (It isn't really cheating, but it's not something you'd want to do for every link on your website.) BTW, you can right-click a link and inspect with firebug or chrome dev tools to see what css styles are applied to it and how they change when you hover over the link.
- normloman 13y agoThe links without underlines or outlines don't look like links until you hover over them. That sucks because 1. It requires you to randomly hover over things in hope of a link. 2. You can't hover on a touch screen. Repeat after me: You're a designer. You are not an artist.
- cesarfarias 13y agoThey are very, very nice!
- yojo 13y agoAnything where your link rotates out from under you, changes color, or changes dimension should probably not be used. You don't want to distract your user right when they're ready to engage more with your site. Ditto for ones that involve lines flying across your link text. The subtler effects are nice, but the delay on them can make it easy to miss that these are links if the cursor is moving fast.
- dlhavema 13y agoThese are pretty cool, thanks for sharing, definitely a nice way to make a link or menu item stand out.
- lifeformed 13y agoI like these, but I think some of them are too slow. If my cursor passes over them on the way to a different destination, they'll begin animation, and then reverse as soon as the cursor goes over. It'll just be barely a hint of movement, whereas normal links change color instantly. I think as soon as your cursor touches a link, you should think "this is a thing" instead of "I think something just happened". An example is that blue one that starts with "umbrella".
- hfsktr 13y agoHow would that be different than replacing img1 with img2 on hover? Just curious. Mostly I'm indifferent to these kinds of posts because CSS is getting more complicated faster than I can learn it (it seems but it might just be me).
- lifeformed 13y agoWell it doesn't have to be instant, but fast enough where you can't reset the animation before something significant changes.
- MindTwister 13y agoThat's what "cursor:pointer" is for which is active for all of theese.
- mneary 13y agoAlthough I know these are intended for nav-bars, a nice pattern I remember seeing for body links was use of a diamond prefix, and underline upon hover. It was nicely subtle, yet distinguishable and overall great for bodies of text.
- mortenjorck 13y agoThe problem with half of these is the unnecessary use of spatial metaphors. Flipping, scrolling, or otherwise moving the un-highlighted text to make room for the highlighted text doesn't accomplish anything – it's the same text, just with a different presentation. Save these spatial animations for progressive disclosure. When you want more information to pop out of something, or you want additional controls to present themselves when the user has entered a specific context, that's when you should consider scrolling and flipping your elements.
- edoloughlin 13y agoAgreed. The animations where the background or the lines around the text transitioned were nice, but the first few times the text flipped or was replaced made me move my mouse away to check that I wasn't missing something. Some of the effects (e.g., bolding) clipped the last letter from some of the words (Ubuntu 13.04, FF23 with a minimum font size set).
- chanced 13y agoSome of these remind me of sites I was building in the 90s. I love how design flows in circles