Cómo crear un botón con CSS

Crear un botón en CSS es una solución a tener que usar imágenes y javascript para poder lograr este tipo de efectos. La ventaja más grande de hacer un boton CSS es la de poder crear cuantos queramos cambiando un par de líneas de código.

Después del salto vamos a ver un tutorial de cómo crear un botón con CSS aplicando algunas reglas CSS3, pero haciendo que el botón luzca igual en cualquier navegador que uses(incluso IE), el resultado lo pueden ver aquí.

¿En qué consiste?

Este botón está hecho con CSS3 y tiene bordes redondeados, degradados y sombras, para hacerlo compatible con la mayoría de los navegadores, y en especial IE, se ha agregado filtros especiales, por lo que el código puede lucir muy grande.

PASO 1: HTML

Lo primero como siempre es definir como va a estar la estructura de nuestro botón, en este caso definimos una etiqueta de vínculo, y dentro de ella una de span para poder hacer el link botón, de otra forma el link sólo serviría en el texto y no en los espacios que hay alrededor de él.

PASO 2: CSS

Si se fijaron en el código HTML, el botón tiene dos estilos, .button, y .button-blue, esto es para definir como va a ser un botón con la primera clase, y la segunda es para personalizar su color en estado estático, sobre y presionado. Vamos a ver cómo está formada la clase button:

y ahora la clase button-blue

Y obviamente si queremos tener más botones de otros colores tenemos que modificar el estilo button-color, porque como les mencioné, la primera clase nos da el patrón para cualquier botón que queramos hacer, y la segunda clase nos personaliza ese botón.

Vía red team design

¿Te fue útil este tutorial?