

Creative Link Effects - Subtle and modern effects for links or menu items - albertoperdomo
http://tympanus.net/Development/CreativeLinkEffects/

======
mortenjorck
The 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
Agreed. 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).

------
crazygringo
Several 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.

~~~
diminish
Did anyone understand how to implement them? are they JS or CSS or both based?

~~~
nfriedly
All 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
The 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.

~~~
woah
Ever heard of a nav menu?

~~~
normloman
Good point. I didn't think of that. My only criticism, then, is that the
animation is bloated and distracting. Forgive my rush to judgement.

------
lifeformed
I 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
How 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
Well it doesn't have to be instant, but fast enough where you can't reset the
animation before something significant changes.

------
yojo
Anything 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.

------
chanced
Some of these remind me of sites I was building in the 90s. I love how design
flows in circles

------
mneary
Although 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.

------
luscious
Can't hover with touch.

------
wehadfun
Most 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
What 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
Uggh. 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/nl...](https://chrome.google.com/webstore/detail/user-
stylesheet/nlfpnjpcddafclelkbgijfpdanaacdcp?hl=en)

~~~
tbrownaw
_Uggh. 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
Everyone bitching about the lack of underlines and not using blue or purple
needs to step back and notice that none of those link examples were shown in
the context of non-link text.

In the context of surrounding text, it's entirely possible that these link
effects are as usable as underlined text.

Design is about concepts like contrast, repetition, alignment and proximity.
The designer here left the use of design principles like contrast up to other
designers to choose how to indicate that a link is a link.

Contrast makes a link look like a link. Not blue, not purple, not underlines,
but contrast.

Besides contrast, context matters too. There are words and expressions which
are often linked, such as proper noun phrases, references to other works on
the internet, obvious link phrases like "click here", etc. Once you've read
one utterance in a different style on the page that is likely to be a link,
then you have enough information to mouse over or try tapping and verify your
hypothesis. Once you've verified the link style on a site once, you don't need
to do it again.

Humans are pretty intelligent pattern matchers, and so long as the designer
has placed enough clues in a page to identify a pattern, that is good usable
design.

FWIW I don't disagree that it would behoove the designer to make things
explicit by showing his links in example contexts, but that doesn't excuse
everyone showing up here raining on his or her parade because they lack the
imagination to see how these could work in context.

------
NKCSS
The other two examples are very much worth the time to check out as well
(links at the bottom of the page).

------
dlhavema
These are pretty cool, thanks for sharing, definitely a nice way to make a
link or menu item stand out.

------
cesarfarias
They are very, very nice!

