Today, while traversing through stackoverflow, one user had asked question about the anchor link button css. He wanted to show mouse hover high-light effect.  The solution I provided is Below.

The two Image user are here:

Main Back Ground Image

The first image is the main(big) back-ground image and the second(small) image is the left side starting image for button.

The main advantage of this css is that, this css is desinged in such a way that it suits itself according to the length of the anchor text.

<html>
<head>
<style type=’text/css’>

#header #nav a {
color: #fff;
float:left;
margin-left:7px;
padding-left:17px;
background:url(“nav-r.png”) 0 0 no-repeat;
text-decoration:none;
}
#header #nav a span {
float:left;
display:block;
padding-right:17px;
background:url(“nav-bg.png”) 100% 0 no-repeat;
line-height:35px;
}
#header #nav a:hover { background-position:0 -70px; }
#header #nav a:hover span { background-position:100% -70px; }

</style>
</head>
<body>
<div id=’header’>
<div id=’nav’>
<a href=’#’><span>Rajan </span></a>
</div>
</div>
</body>
</html>

Download The sample code here

Advertisements