Making hover effect in css & html
i use two jpg button for this implimentation.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Rollover Trifecta Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
/* NAVIGATION BUTTONS */
.menu {
height: 44px;
width: 844px;
}
.cssnav {
position:relative;
float: left;
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
background: url(images/button.jpg) no-repeat;
width: 135px;
height: 49px;
overflow:hidden;/* for ie to hide extra height*/
text-align: center;
line-height:49px;
}
.cssnav a {
color: #000000;
font-size: 11px;
width: 135px;
height: 49px;
float: left;
color: black;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
text-align: center;
}
.cssnav a:hover {
color: #ffffff;
text-align: center;
background-image:url(images/button_hover.jpg);
}
/* END OF NAVIGATION */
</style>
<body>
<!--MAIN NAVIGATION START-->
<div class="menu">
<div class="cssnav"><a href="#" title="Search Engine Optimization">Home</a></div>
<div class="cssnav"><a href="#" title="Search Engine Submission">Search Engine Submission</a></div>
<div class="cssnav"><a href="#" title="Website Design">Website Design</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
</div>
<!--MAIN NAVIGATION END-->
</body>
</html>
0 Response to "Making hover effect in css & html"
Post a Comment