20+ Best Creative and modern effects for links or menu items

Thursday, 15 August 2013
(2 votes)

Today in this post i have 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 i am 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:



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



And also use a span in some cases because i want to add perspective to each item or achieve another effect.



An example for an effect is the following style. It positions a pseudo-element on top of the actual link text and on hover, i’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 */
.ij-effect-15 a {
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    text-shadow: none;
}
 
.ij-effect-15 a::before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    transition: transform 0.3s, opacity 0.3s;
}
 
.ij-effect-15 a:hover::before,
.ij-effect-15 a:focus::before {
    transform: scale(0.9);
    opacity: 0;
}


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

Below you can see Demo and Sources


See the Pen IbrahimJabbari-Effect1 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect2 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect3 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect4 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect5 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect6 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect7 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect8 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect9 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect10 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect11 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect12 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect13 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect14 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect15 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect16 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect17 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect18 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect19 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect20 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


See the Pen IbrahimJabbari-Effect21 by Ibrahim Jabbari (@ibrahimjabbari) on CodePen


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

Do you like this post ?  Follow me on Twitter, Like me on Facebook or Subscribe on YouTube

Main Source: tympanus

3482 times

Sunday, 05 October 2014

Ibrahim Jabbari

I am Ibrahim Jabbari Web Designer / Developer since 2006, This is my blog, I'll share my experiences, Useful resources and all update news from IT world with you all, I hope you enjoy surfing my blog. Connect with me on Facebook, Twitter and and Instagram.

www.ibrahimjabbari.com