Dar estilo a los button de nuestra web

Inicio > Recursos > Dar estilo a los button de nuestra web

Dar estilo a los button de nuestra web

Lunes, 24 de Septiembre de 2007

Una forma para dar estilo a nuestros botones web:

Ejemplo Button

HTML:

<button class="submitBtn"><span>Publicar</span></button>

CSS:

button {border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center;width:auto; overflow:visible;}
 
button span {position:relative; display:block; white-space:nowrap; padding:0 0 0 20px;}
 
button.submitBtn {background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.2em;}
 
button.submitBtn span {height:30px; line-height:30px;background:url(images/btn_blue_left.gif) left no-repeat;color:#fff;}
 
button.submitBtn:hover {background:url(images/btn_blue_right_hover.gif) right no-repeat;}
 
button.submitBtn:hover span {background:url(images/btn_blue_left_hover.gif) left no-repeat;}