Rate this item

It's time to create new or re-design your websites to bring it to the next level.

Download 100+ Free Joomla! templates Download 100+ Free WordPress themes

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.

View demo Download source

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:

1
2
3
4
5
6
7
<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:

1
2
3
4
5
6
7
<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.

1
2
3
4
5
6
7
<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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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!

View demo Download source

Looking for a free Landing Pages template to start creating your stunning website?

90+ Landing Styles (Onepage) for Joomla! 80+ Landing Styles (Onepage) for WordPress

labor-day-50-percent-off

eskişehir escort izmit Escort bursa escort bayan ankara escort bayan van escort bayan elazığ escort bayan erzurum escort bayan
[Flash Sale] Grab 50% OFF for PRO license and Membership! Limited time on today! Get Coupon Code now!
[HAPPY LABOUR DAY!] Grab 50% OFF for PRO License and Membership! Limited time on today => Get Coupon Code now!