CSStransition

Roll Over on Links With Transition – CSS

“Roll Over on Links With Transition – CSS” is a simple transition effect on a link through using CSS3.

DEMO LINK: http://parhammajd.co.uk/examples/css/rollOverTransition.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RollOverTransition</title>
<style>
a {
transition-timing-function: linear;
transition-duration: .66s;
transition-property: background-color;
-webkit-transition-timing-function: linear;
-webkit-transition-duration: .66s;
-webkit-transition-property: background-color;
-moz-transition-timing-function: linear;
-moz-transition-duration: .66s;
-moz-transition-property: background-color;
}
a:link {
color:#777;
text-decoration:none;
}
a:visited {
color:#333;
text-decoration:none;
}
a:link:hover, a:visited:hover {
color:#777;
background-color:#ccc;
}
a:link:active, a:visited:active {
color:#ccc;
background-color:#ccc;
}
</style>
</head>

<body>
This is a <a href="#">link that </a>you can hover it
</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *