SummArg | Cursos y recursos para webmasters

08/02/2012

Modificar el estilo CSS de los botones generados con < input > o < button >

En esta oportunidad no vamos a abarcar todas las nuevas posibilidades que nos otorga la etiqueta button de HTML5 sino que vamos a ver un poco como dar estilo a los tres estados mas utilizados de <button>. También funciona para quienes insertan botones con <input type=”button”>, aunque se verá de modo levemente diferente. La diferencia entre <input> y <button>, es que éste último (implementado en HTML4), permite que insertemos imágenes dentro del botón y que elijamos entre tres tipos de botones mediante type: button, reset y submit.

Tomemos un conjunto de botones comunes y corrientes a los que daremos estilo mediante la clase “tools”. Las colocamos dentro de una lista para acomodar los botones como nos guste.

<ul class="toolbar">
 <li><button class="tools">Cancel</button></li>
 <li><button class="tools">Delete</button></li>
 <li><button class="tools" >Save</button></li>
 </ul>

El CSS quedaría:

ul.toolbar {
list-style-type:none;
height: 30px;
}
ul.toolbar li {
float:left;
}

Para dar estilo a los botones, vamos a buscar dos imágenes (fondos degradados en nuestro caso) que se repitan en el interior, aplicaremos un borde y crearemos un estilo para el estado normal del botón y otro para el estado hover.

.tools {
border: 1px solid #8698af;
background: #acbcd1 url(images/tools-normal.png) repeat-x;
color: #375d84;
padding: 3px;
margin:0;
}
.tools:hover {
padding: 3px;
background: #eff2f5 url(images/tools-hover.png) repeat-x;
border: 1px solid #acbcd1;
}

Finalmente, colocaremos el set de botones en estado disabled. Este estado sirve para colocar un botón o cualquier input con un estilo diferente y sin posibilidad de que el usuario clickee o ejecute ninguna acción.

<ul class="toolbar">
 <li><button class="tools" disabled="disabled">Cancel</button></li>
 <li><button class="tools" disabled="disabled">Delete</button></li>
 <li><button class="tools" disabled="disabled">Save</button></li>
 </ul>

En el CSS le indicamos que utilice otra imagen y aplique otros colores:

.tools[disabled] {
border: 1px solid #999999;
background-image: url(images/tools2-normal.png);
background-color: #c9c9c9;
color:white;
padding: 3px;
margin:0;
}

El resultado de los botones se ve en la siguiente imagen y si bien hay diferencias entre los navegadores, ya logramos que se vean un poco mas parecidos entre si.

Dejar un comentario

  1. Excelente, muchisimas gracias, estaba buscando algo así, ahora mismo lo acoplo a mi plantilla :)

  2. ¿Pero tienes el URL completo de esas imagenes? Gracias

  3. Nekko

    Son imágenes que generé para un proyecto particular. Es meramente agarrar el Photoshop y generar un recuadro con el alto deseado y un gradient de tu agrado.

Dejar un comentario