Ingeniería Systems: Crear botones con símbolos

1. Objetivo

En sus formularios, puede que alguna vez necesite crear botones con símbolos o con pictogramas. Veamos cómo podemos crearlos fácilmente con las pseudo-clases :before y :after. Los ejemplos están adaptados del sitio web: http://www.paulund.co.uk/css-buttons-with-icons-but-no-images

2. El formulario

Vamos a crear un formulario clásico con dos botones, uno para validar el formulario y otro para anularlo. Sin embargo, no vamos a usar botones, sino vínculos, ya que la técnica que vamos a usar, con pseudo-elementos, no se puede aplicar a los botones.

Este es el formulario inicial:

<p>

<label for="nombre">Nombre: </label>

</p>

<p>

<label for="apellidos">Apellidos: </label>

</p>

<p>

<a href="#">Confirme<a/>

<a href="#">Anule<a/>

</p>

</form>

Así se visualizará sin estilos:

3. Crear una clase para los botones

La técnica consiste en crear una clase para todos los botones que vaya a usar en su formulario. Esta clase permitirá diseñar el botón con todos los elementos de formato habituales. Podemos usar las propiedades CSS porque los vínculos aparecen como bloque en línea: display: inline-block.

Con esta clase aplicaremos a los botones un ligero degradado y bordes redondeados.

.botones {

/* La caja*/

display: inline-block;

border: 1px solid #000;

padding: .2em .5em;

margin: 0 4em 0 0;

/* El degradado */

background: -moz-linear-gradient(top, #fff 0%, #eee 100%);

background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);

background: -o-linear-gradient(top, #fff 0%,#ccc 100%);

background: linear-gradient(top, #fff 0%,#ccc 100%);

/* Los bordes redondeados */

-moz-border-radius: .3em;

-webkit-border-radius: .3em;

border-radius: .3em;

/* El texto */

font-weight: bold;

font-size: 1em;

text-decoration: none;

color: black;

}

Así se visualizará el formulario con los estilos:

4. El pseudo-elemento ::before

El pseudo-elemento ::before (fíjese en la nueva sintaxis de los pseudo-elementos con los dos caracteres :) permite añadir texto delante del elemento al que esté asociado. El pseudo-elemento ::after hace lo mismo, pero detrás de dicho elemento.

Tenga en cuenta que puede usar la sintaxis :before y :after si encuentra algún problema de compatibilidad con su navegador.

Vamos a aplicar el pseudo-elemento ::before a la clase genérica de los botones .botones, para que el estilo sea más sencillo.

.botones:before {

font-size: 1em;

padding: 0 .5em 0 0;

}

5. El contenido del pseudo-elemento ::before

Ahora tendremos que indicar el contenido que vamos a añadir delante de la etiqueta del botón, el texto del vínculo a. Debemos especificar a qué elemento se le añadirá ese contenido, ya que cada botón tendrá un contenido diferente.

En nuestro ejemplo, vamos a crear dos selectores específicos.validar:before y .anular:before, con un estilo específico para cada botón.

Segundo parámetro: se trata del pictograma que vamos a insertar. La norma Unicode UTF-8 nos propone cientos de símbolos y de pictogramas. No deje de visitar estas dos URL: http://unicode-table.com/en y http://www.utf8-chartable.de

Sepa que también puede usar las entidades de caracteres HTML clásicas: http://www.w3.org/TR/html4/sgml/entities.html

Para la validación del formulario, queremos insertar el "símbolo de validación", que tiene el código de visualización \2714.

Para la anulación del formulario, queremos usar el símbolo de la "cruz de eliminación", que tiene el código de visualización \2717.

Estos son los dos estilos:

.validar:before {

content: "\2714";

}

.anular:before {

content: "\2717";

}

6. Aplicar las clases

Última etapa, ahora vamos a aplicar las clases que acabamos de crear a los elementos a de los vínculos del formulario. Los dos vínculos utilizan la clase genérica de los botones botoncito y cada uno de ellos utilizará la clase que le corresponda para la inserción de contenido: validar y anular.

<a href="#" class="botoncito validar">Confirme<a/>

<a href="#" class="botoncito anular">Anule<a/>

7. La visualización del formulario

Así se visualizará el formulario: