Glass Hover Button
Button Name
html:
<a href="#" class="hbutton">
<span class="but_l">
</span>
<span class="but_m">
Button Name
</span>
<span class="but_r">
</span>
</a>css:
a.hbutton
{
height:32px;
width:125px;
text-decoration:none;
}
a.hbutton span
{
font-weight:bold;
font-size:10pt;
font-family:Arial;
color:#fff;
}
a.hbutton span.but_l
{
float:left;
height:32px;
background:no-repeat url(btn_leftcap.png);
width:14px;
}
a.hbutton span.but_m
{
float:left;
height:32px;
background: repeat-x url(btn_bg.png);
padding-top:6px;
}
a.hbutton span.but_r
{
float:left;
height:32px;
background:no-repeat url(btn_rightcap.png);
width:15px;
}
a.hbutton:hover span.but_l
{
background:no-repeat url(btn_leftcap_hover.png);
}
a.hbutton:hover span.but_m
{
background: repeat-x url(btn_bg_hover.png);
}
a.hbutton:hover span.but_r
{
background:no-repeat url(btn_rightcap_hover.png);
}code snippets are licensed under Creative Commons CC-By-SA 3.0 (unless otherwise specified)
|