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)