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 stylize 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 to the anchor tags.
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 too.
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 let us play with CSS3 Animation transition
HTML Code
<a href="#" title="" > CSS3 Animation - Color </a>
<a href="#" title="" > CSS3 Animation - Background Color </a>
<div > 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 the comments. You can also contact IOGOOS Solution to build Website Animation Services.
