Change Text Link Hover Effect Using CSS3
  • Published on Jan 29, 2013
  • Tag

Every website has text links. Normally it’s used hover selector and change text colour which is very simple effect. I was wondering if I can add better effect so this article will share how to add cool effect using CSS3.

Table Contents

  1. Previous Knowledge
  2. Change Text Link Colour Using Transition
  3. Change Text Link Background Colour
  4. Blurred Text Link
  5. Glowing Text Link
  6. Rounded Corner Text Link
  7. Rainbow Colour Text Link
  8. Change Text Size
  9. Rotate Text Link
  10. Rolling Text Link – Web Designer Depot Style

1. Previous Knowledge

All effects that I shared in this article are used transition property. It changes from one style to another, without using Flash animations or JavaScripts. These websites will help you to understand:

Vendor Prefixes

You’ll see a lot of similar properties using -webkit- or -moz-below. They are called Vendor prefixes. Vendor prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period.

  • -webkit- → Google Chrome、Safari
  • -moz- → Firefox
  • -o- → Opera
  • -ms- → Internet Explorer

There are some properties that you don’t need to add vendor prefixes anymore like border-radius. You can check “CSS current work & how to participate“.

Go to Table Contents

2. Change Text Link Colour Using Transition

Demo

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
a:hover {
    color: #39f;
}

Go to Table Contents

3. Change Text Link Background Colour

Demo

CSS

a{
    color:#fff;
    background: #03c;
    text-decoration:none;
    padding:0 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    background: #39f;
}

Go to Table Contents

4. Blurred Text Link

You can make burred text using text-shadow .

Demo

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
}
a:hover {
    color: transparent;
    text-shadow: 0 0 5px #03c;
}

Go to Table Contents

5. Glowing Text Link

It’s the same idea as burred text, using text-shadow and make font colour white.

Demo

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
}

a:hover {
    color: #fff;
    text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
}

Go to Table Contents

6. Rounded Corner Text Link

Demo

CSS

a{
    color:#fff;
    background: #03c;
    text-decoration:none;
    padding:0 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
a:hover {
    border-radius:30px;
}

Go to Table Contents

7. Rainbow Colour Text Link

Using -webkit-background-clip: text; which supports only webkit browsers.

Demo

CSS

a{
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
}

Go to Table Contents

8. Change Text Size

Add display: inline-block; to a tag because it’s an inline element.

Demo

CSS

a{
    display: inline-block;
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}

Go to Table Contents

9. Rotate Text Link

Demo

CSS

a{
    display: inline-block;
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

Table Contents

10. Rolling Text Link – Web Designer Depot Style

This is the effect that Webdesigner Depot is using. It’s used span in order to make it a block element and also used :after and content to show pseudo-elements etc… It looks complicated but amazing effect!

Demo

HTML

<a href="#"><span data-title="Text Link">Text Link</span></a>

CSS

a{
    color: #03c;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

a span{
    display: block;
    position: relative;
    padding: 0 2px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

a:hover span {
    background: #03c;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

a span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: #03c;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

Go to Table Contents

How easy to add cool effect using CSS3!

Share

Comments

  • Natalie

    Awesome collection! Thanks for sharing :D

  • Thanks for the great collection! Quite like the “Rolling Text Link”.

  • Sayeman

    Thanks Mana, Your Articles are as cute as you are.

  • Awesome! Thanks for this. Helped me figure out a few things.

  • pankaj kumar

    Nice effect. I just loved it, and going to use some of them in my project. Last effect doesn’t work on IE9. Can you please suggest any hack.

  • No, unfortunately IE9 doesn’t support CSS3 transition. :(