Botones CSS con rollover sencillo

Este trata sobre cómo construir botones similares a los que antes hacíamos con imágenes, pero que desde que existe el CSS3, podemos hacer simplemente desde la hoja de estilo.

El que se puedan hacer así tiene varias ventajas. Por un lado serán visibles para las arañas de los navegadores (las imágenes no lo son tanto), pero quizás las más importantes son la facilidad para cambiar el diseño o la redimensión automática.

Como hablamos de CSS sólo tendremos que crear una clase, darle propiedades y por último añadírsela al enlace que queremos convertir en botón. Nuestra clase se llamará boton -somos así de originales- y para que se entienda le iremos añadiendo propiedades poco a poco.

Un enlace básico sería así:

<a class="boton" href="URL_DESTINO1">Destino 1</a>

Destino 1

Como la clase boton todavía no existe, el enlace se verá con las propiedades por defecto que tengamos en nuestra plantilla. Lo primero que le incorporamos es un borde, un margen interno (padding), colores para fondo, texto y tamaño de este último. Por si los enlaces aparecen con un subrayado, también forzamos la eliminación de este detalle para que el aspecto sea más limpio.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;
}

Destino 1

Ahora le añadimos un efecto redondeado en las esquinas. Si todos los navegadores trabajaran igual nos bastaría con la primera propiedad. Las otras dos son para aumentar la compatibilidad:

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;

border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
}

Destino 1

Ya va tomando forma la cosa. Ahora es el momento de incorporar unas sombras que le den realismo y "altura". Al igual que con los bordes redondeados, las sombras hay que declararlas de tres maneras para que se puedan interpretar en más navegadores distintos. Y ya que estamos, también añadimos una sombra al texto con text-shadow.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;


border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;

box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;
}

Destino 1

Nos falta un último toque que será el degradado del fondo.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;


border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;


box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;

background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background: -moz-linear-gradient(top, #eeeeee, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#999999');
}

Destino 1

Mola ¿verdad? Pues ya el último detalle es que el botón sea "pulsable". Esto es, que cuando pinchemos haga algo. Para eso eliminaremos las sombras y desplazaremos 1 píxel abajo-derecha. La pseudoclase active es lo que nos permite hacer esto, ya que es la que detecta esa pulsación.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;

border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;

box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;

background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background: -moz-linear-gradient(top, #eeeeee, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#999999');
}

.boton:active {
box-shadow: 0px 0px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
position: relative;
top: 1px;
left: 1px;
}

Destino 1

En este último podéis pinchar y ver el efecto.

A partir de aquí vuestra imaginación es la que os permitirá cambiar la apariencia normal y la activa, así como también incorporar otra pseudoclase hover para cuando simplemente se pase el puntero por encima. Estos tres tienen tres estados: normal, hover y active. A probar...

Contacto Bio Portfolio

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter