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

orangesweety · Jun 16, 2015

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 · Jun 16, 2015

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.

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

orangesweety

Member

emily

Member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud