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

orangesweety

New member
Joined
May 25, 2015
Messages
31
Points
0
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

New member
Joined
Mar 12, 2015
Messages
53
Points
0
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.
 
Latest threads
Replies
2
Views
368
Replies
1
Views
366
Replies
4
Views
1,888
Replies
3
Views
794

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top