How to put the faded hover effect on the button?

Question

On many sites, such as http://notes.envato.com/ you'll notice that when the links are hovered over, they will fade into a different color as opposed to immediately switching, the default action. How to do that ?

I have tried HTML:

<ul class="icons">
    <li class="flickr">
        <a href="http://flickr.com/photos/we-are-envato" rel="external" title="Flickr">
            <img src="img/flickr.png" target="_blank">
        </a>
     </li>
</ul>

CSS:

ul.icons {
    position: absolute;
    top: 95px;
    right: 0;
    z-index: 100;
}

li {
    display: inline;
    padding: 5px;
}

li a {
    list-style: none;
    text-decoration: none;

}

li.flickr a {
    height: 50px;
    width: 50px;
}

li.flickr a:hover {
    color: #A5BA84;
}

Can anyone tell me how to set the effect ?

score 1 · Accepted Answer · answered Jul 04 '13 at 13:27

1

You're going to need to use CSS to apply a transition to the anchor. Here's an example:

/* replace 0.5s in each one with the time you want it to take */
a {
    text-decoration: none;
    color: #007edf; /* starting color */
    transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
}

a:hover {
    color: #0069ba; /* ending color */
}

answered Jul 04 '13 at 13:27

@MohammadAreebSiddiqui Yes it does, it's hard to see, but the blue darkens a bit, because those are the two colors specified; light blue, and a slightly darker blue. Try changing the a:hover color to #000 and you will see that it does transition as it should. – Jul 04 '13 at 13:30

score 0 · Answer 2 · edited May 23 '17 at 12:15

As explained by user javadog36, you can do it with css-level3 'transition' property.

Also, in this answer from abody97 on an almost same question ( Fade on hover text link color ) they propose a javascript (jquery) solution.

Be careful when comes time to pick a solution ( css || javascript ). According to caniuse.com (http://caniuse.com/#search=transition), global support : 78.47%

i'm one of those who believe that the jQuery solution is more 'cross-browser' for the moment.

Blockquote:

You either need to animate the colors after you include jQuery UI (or jQuery color):

$('a').hover(
    function() { $(this).animate("color", "#FFFFFF"); },
    function() { $(this).animate("color", "#000000"); }
}

Or use CSS3 transitions (avoiding jQuery altogether):

a {
    color: #000000;
    -moz-transition: 1s color; /*For Firefox < 16.0*/
    -webkit-transition: 1s color; /*For WebKit (Chrome, Safari)*/
    transition: 1s color; /*animates for 1 second*/
}
a:hover {
    color: #FFFFFF;
}

However, CSS3 transitions' support is limited; it isn't supported in IE <= 9 (although it is supported in the soon-to-come IE10).

answered Sep 23 '12 at 9:39 Abody97

Thanks for your help. I have tried with css3 transition properties and working fine :) — Badiul Alam Shufol, Jul 04 '13 at 16:38

How to put the faded hover effect on the button?

2 Answers2