Creative Link Effects

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

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

Feedback 130

Comments are closed.
  1. hi i was wondering if you could help me with this problem ! i want this effect but instead of displaying the horizontally, i want it vertically ! can you suggest any thing for me ?

  2. Hi. Is there a chance to get a plugin for my WordPress website that includes these icons with their amazing effects?

  3. thank u for your effort but I tried effect num 11 in blue section 😀 it is working well but it the linke has 2 words Like “About Us”
    it is shown in 2 rows I mean “Us” appear under “About” word till transition duration finished

  4. This is Stunningly amazing, Thank you for sharing your awesome inspirations.
    I just wonder If it’s possible to apply an “active” status to a link that’s inside the “cl-effect” div that turns the pseudo-elements on by default?

    Like:

    <a href=”index.html” rel=”nofollow”>Home</a>

  5. Nice tutorial. Thanks for share this. Your all tutorials are awesome and helpful. Thanks dude, Keep it up

  6. Great Tutorial! When I see this, I really interested. Now, I have applied to my website. Thanks you for your nice tutorial!

  7. Uh ..Hi there …

    I wanted to implement one of those designs in my website which i’m currently building in Webydo , can anyone tell me how to do this ??

  8. hi
    a quick question….
    I am able to use these on hover or click but how to use these on page load or the Initial animation on the page load?

    help is much appreciated.

    thanks
    Kunal

  9. Hi mary, love this and the other stuff you do. I am trying to use #11 however when the button is not one word it breaks, any idea’s how to fix this?

  10. For the life of me, I can’t get any of the effects to work. I use Tumblr. Can’t understand what I’m doing wrong. Someone, please help me.

    P.S. Mary, your work is uber-cool. Thank you.

  11. i’m new to this.. can anyone help me?.. i downloaded the files.. how do i use it..
    by the way.. love the effects..