Creative Link Effects

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.

From our sponsor: Try Mailchimp today.

Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

Please note that pseudo-element transitions don’t work in every browser. Best viewed in Chrome and Firefox.

In most cases the HTML is simply a nav with some anchors:

<nav class="cl-effect-13">
	<a href="#">Beleaguer</a>
	<a href="#">Lassitude</a>
	<a href="#">Murmurous</a>
	<a href="#">Palimpsest</a>
	<a href="#">Assemblage</a>
</nav>

But for some special effects we might use a data attribute for repeating the link text in the pseudo-element:

<nav class="cl-effect-11">
	<a href="#" data-hover="Desultory">Desultory</a>
	<a href="#" data-hover="Sumptuous">Sumptuous</a>
	<a href="#" data-hover="Scintilla">Scintilla</a>
	<a href="#" data-hover="Propinquity">Propinquity</a>
	<a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

We might also use a span in some cases because we want to add perspective to each item or achieve another effect.

<nav class="cl-effect-10">
	<a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
	<a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
	<a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
	<a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
	<a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

An example for an effect is the following style. It positions a pseudo-element on top of the actual link text and on hover, we’ll make the pseudo-element disappear by scaling it down and making it fade out (structure as in the second html block):

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	transform: scale(0.9);
	opacity: 0;
}

We hope this collection gives you some inspiration for creating some nice effects.

Please note that IE10 doesn’t support transform-style: preserve-3d, a property that is used in some of the examples. Since we can’t test for it yet using Modernizr you can try to use one of the suggested solutions for detecting IE10.

I hope you enjoyed these link effects and find them inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 130

Comments are closed.
  1. awesome, superb, fantastic, lovely, keep making all these lovely effects and make us feel like flying….

  2. simple stunning !
    fresh example of creative link styles ! thanks for share,
    congrats Mary Lou one more time !

  3. Great stuff, ms Ilic. Hvala for all the great tutorials down the years…
    On cl-effect-11 (my favorite) if one has a multi-word link, data-hover breaks into 2 (or more) lines – falling back into place only after the animation is over. Must be a simple solution, but escapes me. Any suggestions?
    Zel

  4. Absolutely love it Mary-Lou, my navigation will look much better when i’ve uploaded a redesign, thank you so much for sharing your knowledge 🙂

  5. I don’t know if anyone else is having this issue, but some of the transitions aren’t working in safari. Even though the -webkit code is there.
    The only effect Safari seems to recognize are the rotating ones. Anyone know of a fix?
    Thanks!

    • Ouch! Ok thanks a bunch for the response! I noticed some of them are pretty universal though so all is not lost! 🙂

  6. I had to write this: Inspiring work, thanks a lot!

    Very creative new styles!

    Long live to you, Mary lou!

  7. Hi Mary Lou – Your work is quite scintillating and down right gorgeous! Thanks for sharing, and peace to you & yours.

  8. Very nice work. It’s great that you do not need additional JavaScript. I have one question: Why does effect 5 not working with two words. Only by using   in the data attr. Or I make a mistake. http://jsfiddle.net/G5ytd/ Thanks!

  9. I implemented effect#14 into my website footer. However I wanted the lines to get a little bigger, covering the link when they rotated and changed to horizontal lines. I found that with your code as it was it created a jerky effect in Chrome and IE10 (strangely, Firefox was fine) – http://codepen.io/patrickwc/pen/aKEec . When I removed translateX it worked really well. Just thought I’d let you know.

  10. Started implementing this on a website of mine, specifically effect #7. I have it set up only on a certain class of headings, made the changes I need to in the CSS (meaning I removed the nav tags and replaced them with other appropriate tags) and noticed that it’s still doing a strange thing to my header. Causes my header to change position and/or size (a few pixels at most) for the duration of the transition. I can’t figure out why on earth this would be happening. Could the *:after, *::before box sizings have anything to do with it?

  11. Is there any way to enable pseudo transitions in Safari using jQuery? Plugin or something like that?

  12. Great work.
    i have a question is it allowed to use some of these effects in Themeforest? if it is i will use some of these effects

  13. I’ve also found the need to click the link while animating is critical.
    Is there a solution for this?
    These nice animations can’t be used otherwise.

  14. I am so enjoy in this site…
    I got many web technology from here..thank you so much..
    I am so interested in web Design…

  15. Just what i needed, a sip o inspiration to use on my menu!
    Great collection also 🙂
    Thank you!

  16. Does anyone have any problems with “residue”. Sometimes when I hover over them and leave, (specifically talking about the last one where the bars come from above and below) there are little white lines that stay there. When I have all the anchors set to # and click them, I really notice this. Great tutorial though and I love all the effects.

  17. Excellent example, plain and simple. Any ideas about implement a sub-menu with the same technic?

  18. The most creative use of css3 for horizental menues, wonderful work, superb, excellent

  19. Hello. First of all, great thax for this article! Affects are awesome. But I have one question. I’m trying to make links behave like it’s in 11’s example: everything works fine untill there is a space between words: in this case the second word jump into the second line and perfectness of the effect is broken.
    Has anybody faced with such a problem? Is there any solution exactly with 11’s example functionality? Please, help me.

  20. Excellent work!

    I am very interested in knowing how and if these could be integrated with wordpress…

    Could anyone please point me in the right direction?
    A few tips, links to some documentation?

    Thank you very much!