CSS3 Link Color Transition Effect

/ Published in: CSS
Save to your folder(s)

A simple CSS3 link-color transition effect. Fades from the base color to the active/focus color and back on rollover. A nice little added effect that's pretty well cross browser. Works with Webkit (Chrome/Safari/etc), Opera, Gecko (Firefox/Seamonkey/etc), and IE 10. Degrades nicely for unsupported browsers.

Copy this code and paste it in your HTML
  1. a {
  2. transition: color 0.25s;
  3. -moz-transition: color 0.25s;
  4. -webkit-transition: color 0.25s;
  5. -ms-transition: color 0.25s;
  6. -o-transition: color 0.25s;
  7. /* Fix horrible weird thickness BS */
  8. opacity: 0.9999999;
  9. }
  10. a:link, a:visited{
  11. color:#FF0000;
  12. text-decoration:none;
  13. }
  14. a:hover, a:active, a:focus {
  15. color:#F90;
  16. text-decoration:underline;
  17. }

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.