Advanced Search

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.

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.