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

orangesweety

Member
Registered
Joined
May 25, 2015
Messages
30
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

Member
Registered
Joined
Mar 12, 2015
Messages
44
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.
 
Older Threads
Latest Threads
Replies
1
Views
14
Replies
1
Views
77
Replies
0
Views
68
Replies
0
Views
76
Recommended Threads
Replies
9
Views
5,083
Replies
0
Views
1,860
Replies
0
Views
1,657
Replies
2
Views
1,248

Latest postsNew threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

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