We would like to know how to create Color CSS3 Transitions.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a:link {<!--from ww w .j a v a2s. co m-->
display: block;
width: 200px;
height: 30px;
color: white;
text-decoration: none;
background: gray;
padding: 20px 0;
text-align: center;
}
a:hover {
background: rgba(255, 0, 0, .75);
-webkit-transition: background-color 5s;
-moz-transition: background-color 5s;
-o-transition: background-color 5s;
-ms-transition: background-color 5s;
transition: background-color 5s;
}
</style>
</head>
<body>
<a href="#">Example 1</a>
</body>
</html>
The code above is rendered as follows: