Decorar botones en CSS (Input button)

Hace poco para un proyecto del trabajo necesitábamos decorar unos botones en CSS, aquí dejo un pequeño ejemplo sobre como decorar los botones en CSS utilizando sprites.

Imágenes de fondo

Para crear los botones utilizaremos únicamente dos imágenes, una para el botón activo y otra para el boton inactivo, son estas dos, nótese que solo usaremos dos imágenes para mas 16 botones distintos:

PNG para Botones inactivos

PNG para Botones activos

Código CSS

Ahora creamos el css donde tendremos una clase principal llamada btn y clases secundarias que especifican que imagen/icono utilizar, por ejemplo la clase btnsave que muestra un típico guardar con el icono de un disquete.

.btn{
  height: 23px; background-color: #f5f5f0; border-bottom: 1px solid #555555;
  border-right:1px solid #555555; border-top:0px; border-left:0px; font-size: 9px;
  color:black; background-image: url(./img_comuns/btns.png);
  padding-left: 20px; background-repeat: no-repeat; cursor:hand; cursor:pointer;
  margin-left:5px; margin-right:5px; outline-width:0px;
}

.btn:hover{
  height: 23px; background-color: #f5f5f0; border-bottom: 1px solid #AAAAAA;
  border-right:1px solid #AAAAAA; border-top:0px; border-left:0px;
  font-size: 9px; color:black;padding-left: 20px; background-repeat: no-repeat;
  cursor:hand; cursor:pointer; margin-left:5px; margin-right:5px;outline-width:0px;
  background-image: url(./img_comuns/btns_act.png);
  
}

.btnadd{ background-position: 0px -92px; }
.btnfind{ background-position: 0px -115px; }
.btnprint{ background-position: 0px -69px; }
.btnmail{ background-position: 0px -138px; }
.btnsave{ background-position: 0px 0px; }
.btndelete{ background-position: 0px -46px; }
.btncancel{ background-position: 0px -23px; }
.btncopy{ background-position: 0px -161px; }
.btnnonuser{ background-position: 0px -322px; }
.btnuser{ background-position: 0px -276px; }
.btnadmin{ background-position: 0px -299px; }
.btncheck{ background-position: 0px -207px; }
.btnuncheck{ background-position: 0px -230px; }
.btnrefresh{  background-position: 0px -345px;  }
.btnlogout{ background-position: 0px -368px; }
.btnapply{ background-position: 0px -184px; }

Como vemos, cada clase secundaria lo único que hace es enfocar al icono que queremos utilizar, podríamos modificar la imagen para añadir iconos nuevos a la parte inferior fácilmente.

Decorando los botones

Para decorar los botones añadimos la clase básica btn y luego la clase del icono, por ejemplo:

 <input type='button' class='btn btncancel' value='Cancelar'>
 <input type='button' class='btn btnsave' value='Guardar'>
 <input type='button' class='btn btndelete' value='Eliminar'>

Quedaría así:

Descargar

Podéis descargar el ejemplo con el htm, css, y la imagen pulsando en estos enlaces:

  botones_css.tar.gz
  botones_css.zip
  botones_css.tar.bz2

Podeis utilizar estos botones en vuestros sitios libremente sin pedir permiso, pero dejar un comentario aquí se agradecería, saludos!

Quizás te interese:

Gravatar en PHP, Clase para generar avatares.

Comentarios