Creative Link Effects

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

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 130

Comments are closed.
  1. Wow, awesome tricks . I can create element with pseudo-class . By the way , that pseudo-class is CSS3 only? Thanks , i hope you answer it =))

  2. Seems..You are the teacher for every web designer/developers in this World! Thank you a lot. Great stuff!!

  3. Nice work. I really loved the idea of special effects in link. Keep it up! 🙂

  4. LOVE these! I slightly modified the last example to shift the lines sideways, from the right and left:


    /* Effect 21: borders slight translate */
    .cl-effect-21 a {
    padding: 10px;
    color: #237546;
    font-weight: 700;
    text-shadow: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
    }

    .cl-effect-21 a::before,
    .cl-effect-21 a::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
    }

    .cl-effect-21 a::before {
    top: 0;
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    transform: translateX(10px);
    }

    .cl-effect-21 a::after {
    bottom: 0;
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
    }

    .cl-effect-21 a:hover,
    .cl-effect-21 a:focus {
    color: #fff;
    }

    .cl-effect-21 a:hover::before,
    .cl-effect-21 a:focus::before,
    .cl-effect-21 a:hover::after,
    .cl-effect-21 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
    }

  5. This is just another incredible work from you! Thank you, you give a lot of inspiration to me.

    • could you tell me please how can i change the width or the height for any of these links