home   articles   tags   browse code   

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);
}


 

Tags: css, html
 


 

 



Related Articles
 



home  |  privacy policy  |  terms of use  |  contact  


©2010, Zedwood Digital