How to create slow motion background for anchor tags using CSS3?

[orangesweety]

Cascaded Style Sheets version 3 have awesome features, which reduces java script work. I will use CSS3 transition property mostly, it gives simple animation experience to the visitor. I will give background transition to anchor tags as follows:

<style>
a.read-more{
width: 150px;
color: #eee;
background: #666;
display: block;
}
a.read-more:hover {
color: fff
background: #333;
-webkit-transition: background 0.6s linear;
transition: background 0.6s linear;
}
</style>

Here my class is red-more for anchore tag. I gave lite color in the static position and dark colors on hover change. It give smooth feel to the user, if we use 6 pixels radius that looks even better feel.

 

[emily]

I use transform also, suppose i will use to increase the size on mouse hover, code will be like this:

a.read-more:hover {
color: fff
background: #333;
-webkit-transition: background 0.6s linear;
transition: background 0.6s linear;
transform: scale(1.4);
-webkit-transform: scale(1.4);

Here we have to use webkit, because some times chrome doesn't support the CSS3 default tags.