Make your links stand out with only CSS!

CSS3 has added so many great features and effects. One effect that I like to use is the link color transition effect (just hover over this link to see it in action).

To make this effect work, all you need is the CSS code:

a {
	transition: color 0.5s;
	/* Fix horrible weird thickness thing */
	opacity: 0.9999999;
}
a:link, a:visited{
	color:#F90;
	text-decoration:none;
}
a:hover, a:active, a:focus {
	color:#FF0000;
	text-decoration:underline;
}

Be sure to substitute the colors you want to use for the unclicked link in the a:link, a:visited section, and the color you want to transition to when the link is hovered over with the pointer in the a:hover, a:active, a:focus section.

I must note that this effect is intended for desktop users. While it will work for mobile (the link will transition when the user touches the link), it’s not ideal for mobile-centered sites.

Leave a Reply