CSS color fade on hover

0
212

Did you want to create a small custom effect for a link? You can actually create a color fade hover from CSS. This is a easy thing to do:

a {
 color: #333;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox / -o-transition: color 1s ease-in; / opera */
}
a:hover { 
 color: #ccc;
}

Or if you wish to specify a more custom element like a link from a specific div you can do like this:

<div class="hoverlink">     
         <a href="#">mylink</a>
         <a href="#">mylink 2</a>
</div>

The following code will work for the HTML code wrote above:

.hoverlink a {
 color: #333;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox / -o-transition: color 1s ease-in; / opera */
}
.hoverlink a:hover { 
 color: #ccc;
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here