Dar estilo a nuestros button

Publicado por Nikko el dia 17 Sep 2007 - Guardado en CSS, Diseño Web Leido 2,327 Veces

En vikiworks veo otra sencilla técnica para mejorar los botones de publicación de nuestros formularios y lograr así adaptar completamente todo a nuestro diseño, aun dependiendo desde donde naveguen nuestros usuarios.

Ver demo - Descargar ejemplo

 

HTML:
<button value="submit" 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;}

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. [...] Dar estilo a nuestros button « Xyberneticos (tags: button) [...]

  2. [...] | Archivos auxiliares Demo en Xyberneticos | Clic aquí Vía | Xyberneticos Tags: botones, CSS, Descargas, Diseño Web, Efectos, tipComparte este [...]

  3. [...] Fuente: Xyberneticos [...]

  4. [...] Dar estilo a nuestros button vía Xyberneticos [...]

  5. [...] Fuente: Xyberneticos [...]



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: