CSS3 Animation - Stylise Links and other HTML elements

Links, Links, Links!! That’s what we have all over the internet. On our website and blog posts, we have a lot of links to point a user to another page. Today I will share a small trick to stylise the links with CSS3 Animation. That’s what I’ve used on this website and you can apply...
May 21, 2013 CSS, Tips & Tricks, CSS

Links, Links, Links!! That’s what we have all over the internet. On our website and blog posts, we have a lot of links to point a user to another page. Today I will share a small trick to stylise the links with CSS3 Animation. That’s what I’ve used on this website and you can apply the same as well to change the link color with style on hover.

CSS3 Animation

With CSS3 animation, we can add some effects when changing from one style to another without using any flash or javascript. We will use CSS animation transition to add some cool effects on the anchor tags.

View Demo

How it works

CSS3 transition effects let an element gradually change from one style to another. To do this we must specify two things:

Specify the CSS property we want to add an effect to.
Specify the duration of the effect.
Optionally we can specify “transition-timing-function” which is set to “ease” by default however, we can use any of these linear|ease|ease-in|ease-out|ease-in-out
Now lets play with CSS3 Animation transition

HTML Code

<a href="#" title="" class="color-animation"> CSS3 Animation - Color </a>
<a href="#" title="" class="background-animation"> CSS3 Animation - Background Color </a>
<div class="change-width"> Change Width </div>

CSS Code

.color-animation{
	color: blue;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	-o-transition: color 1s ease;
	-ms-transition: color 1s ease;
	transition: color 1s ease;
}
.color-animation:hover{
	color: red;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	-o-transition: color 1s ease;
	-ms-transition: color 1s ease;
	transition: color 1s ease;
}
.background-animation{
	background: blue !important;
	color: white !important;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}
.background-animation:hover{
	background: red !important;
	color: white !important;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}
.change-width{
	width: 150px;
	background: #444;
	color: #fff;
	margin: 20px auto;
	padding: 10px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}
.change-width:hover{
	width: 350px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

Try this code on a blank HTML page and add the CSS either within ... tags or in your stylesheet. Play around a bit with the CSS to understand the CSS3 Animation transition and create some cool effects for your website links and other block level elements. Feel free to discuss this further in comments.

  • Vijender Kumar

    Hello sir, I am trying to create a web page about a home service provider (on rent), but i am still confused how to complete it, i created four different pages for this, one is HOME, OUR HOMES, SUBMIT QUERY, CAREER, CONTACT US… i need to put a animation on this main page, i create a small animation in cs6, and i also want images in slideshow on main page, and how can i put background music on the web page? what should be the code for all these things.?
    please reply…..

    • Hi Vijender, I guess you need use google to search for each of your requirements. There are a lot of tutorials and help spread all over. For css3 animation try https://daneden.me/animate/.