how to animate color of a link on hover

Question

i've few types of links on my website.

First is just simple link without any styles such as backgrounds. The second type of links are with background colors similar to buttons.

these both have hover color change effect which is accomplished by CSS.

what i want is to animate that color change on hover, i want it to change smoothly.

is there any way to white a few line of code in master page of all other pages, so ever single link will animate its color change on hover?

Thanks in advance.

See http://stackoverflow.com/questions/6008324/fade-effect-on-link-hover - the accepted answer shows how to achieve this with CSS transitions. — Paul Roub, May 10 '13 at 19:55

nullability · Accepted Answer · 2013-05-10T20:54:32.880

5

The simplest way to do this is to use CSS3 transitions on the background-color property.

For example:

a {
    background-color: blue;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
}
a:hover {
    background-color: red;
}

Note that this won't work in all browsers (e.g. IE8).

For more examples see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

edited May 10 '13 at 20:54

answered May 10 '13 at 19:55

nullability

10,545
3
45
63

k. that worked for a link that doesn't have a background style. just fine for animating text color. how to do the same with background of a link? thanks. – Zafar May 10 '13 at 20:00
ohhh.... sorry. just got it. replace "color" with "background-color". that is it :-) – Zafar May 10 '13 at 20:02

score 0 · Answer 2 · answered May 10 '13 at 19:58

0

This is possible with jQuery (via 3rd party plugins that exist), OR css3 transitions.

Fiddle: http://jsfiddle.net/ZKXWg/

HTML

<a href="#">Hover me</a>

CSS

a,
a:hover {
    -webkit-transition: color ease-in-out 800ms;
    color: red;
}

a:hover {
    color: blue;
}

I've only included the -webkit vendor prefix, but applicable prefixes should be added/used.

answered May 10 '13 at 19:58

couzzi

6,316
3
24
40

**Most** important to include is the **`transition`** style, not specifically the vendor prefix ones – Ian May 10 '13 at 20:18

score 0 · Answer 3 · answered May 10 '13 at 20:01

Try using css3 transition property.

DEMO: http://jsfiddle.net/XjEC9/

a { 
   background-color: blue; 
   color: white; 
   transition-property: background-color, color; 
   transition-duration: 2s; 
   transition-timing-function: ease; 
}

a:hover { color: red; background-color: green; }

how to animate color of a link on hover

3 Answers3

HTML

CSS