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.

  4. carlos perez

    tengo un problema acerca de situar un boton mira este es el codigo en html

    y este en css
    input{
    width:10%;
    padding:10px;
    float:left;
    margin-top:40px;
    margin-bottom:20px; padding:10px auto;
    display:block;
    text-decoration:none;
    }
    input .button{
    width:10%;
    float:;
    margin-top:40px;
    margin-bottom:20px; padding:10px auto;
    display:block;
    text-decoration:none;
    }
    lo que trato de hacer es que lo pueda situar donde yo quiera y siempre esta a la derecha(de mi lado) y yo lo quiero a la izquierda ya trate con float:rigth; y no se mueve si achico el texto que esta arriba con el padding si se mueve a la izquierda pero el texto se sale el texto, si m pudieras ayudar con el codigo gracias

  5. carlos perez

    acompletando el html que no puse en la pregunta

Dejar un comentario