How To Create Amazing Link Hover Effect Using CSS3?

Tutorial teaches us to create cool looking link hover effects using pure CSS3. We use CSS3 transitions, rotation and scaling properties to achieve this colorful effects on link hover.

Earlier we had see some transition effects on pure texts, boxes, and images to achieve fading effects using CSS3. Today, it is time to achieve something really cool using CSS3 transitions. We are going to create cool looking links which zooms out and tilts.

You might also like these:
35 Text Link And Hover Effects
Zoom and spin image using CSS3
Beautiful circles using CSS3

These links are going to either tilt to the right or left on mouse hover. Before we get into action. Have a look at this amazing DEMO.

CSS Code:

.coollinks a {
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-transition-duration: 0.35s;
 -moz-transition-duration: 0.35s;
 -o-transition-duration: 0.35s;
 transition-duration: 0.35s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
.coollinks #one:hover, #three:hover, #five:hover{
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform: scale(1.01) rotate(-1.1deg);
 -moz-transform: scale(1.01) rotate(-1.1deg);
 -o-transform: scale(1.01) rotate(-1.1deg);
 transform: scale(1.01) rotate(-1.1deg);
}
.coollinks #two:hover, #four:hover {
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform: scale(1.01) rotate(1.1deg);
 -moz-transform: scale(1.01) rotate(1.1deg);
 -o-transform: scale(1.01) rotate(1.1deg);
 transform: scale(1.01) rotate(1.1deg);
}
.coollinks #one:hover{
 background: #815782;
 text-decoration: none;
 color: #fff;}

.coollinks #two:hover {
 background: #62946d;
 text-decoration: none;
 color: #fff;
}
.coollinks #three:hover {
 background: #824c4a;
 text-decoration: none;
 color: #fff;
}
.coollinks #four:hover {
 background: #825f0c;
 text-decoration: none;
 color: #fff;
}
.coollinks #five:hover {
 background: #823a3a;
 text-decoration: none;
 color: #fff;
}

HTML Markup used:

<div class="coollinks">
<a href="http://www.itechcolumn.com/" id="one">Techno Blog</a>
<a href="http://www.itechcolumn.com/2012/04/5-google-panda-update-34-briefing-2012.html" id="two">Google Panda 3.4</a>
<a href="http://www.itechcolumn.com/p/itechcolumn-table-of-contents.html" id="three">Table Of Contents</a>
<a href="http://www.itechcolumn.com/p/contact.html" id="four">Contact Us</a>
<a href="http://www.itechcolumn.com/2012/02/custom-subdomain-for-blogger-using.html" id="five">Blogger Custom Domain</a>
</div>

In the CSS code, we are defining a default values for transitions, rotations and scaling. We have defined 325milliseconds for the transitions duration initially.
Each links are given names such as “one”, “two”, “three” and so on till “five”.
On mouse hover on these links changes the background color, sets the font color to white. Apart from just changing those, we also zoom the links and tilt them to right or left. Thus, creating the awesome effect.
We define the CSS3 for Firefox, Safari/Chrome[Webkits], and Opera.
The transition effects are not yet supported on IEs.

Hope you enjoyed this tutorial. Please don’t forget to share it with your friends. Thanks for peeping in. Have a great time.

~iTechColumn

About The Author

Karan Vyas is the founder at itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

Leave a Reply

Your email address will not be published.