Botones CSS con rollover sencillo | Oloblogger 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 si...

23 de diciembre de 2011

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>



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;
}




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;
}




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;
}




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');
}




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;
}





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...




Votar en los Premios Bitacoras.com

¿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.

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

21 comentarios :

  1. wow impresionante oloblogger, gracias lo voy a utilizar, felices fiestas hermano

    ResponderEliminar
  2. Felices Fiestas Chiknaui.Mikistli (tienes un nick muy largo como para ponerlo completo) :)

    ResponderEliminar
  3. Bueno como estoy empezando desde cero y este blog es la biblia para mi, quiero felicitarte y darte las gracias por tu labor y ayuda, a personas como yo que estamos empezando...
    Como estoy un poco perdido y tengo unas ideas de como hacer mi blog y esto de los botones me vendrian bien quisiera hacer unas preguntas.

    Estas cadenas donde las tendria que poner delante o despues de alguna cadena tipo.

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

    ResponderEliminar
    Respuestas
    1. El primer código es HTML y va en el lugar dónde quieras mostrar el botón. Realmente es un enlace sencillo pero le hemos añadido la clase "boton" para controlar su estilo, es decir, su aspecto.

      Ese aspecto se controla con CSS que es otro tipo de código distinto desarrollado para eso, para el estilo (Cascade Style Sheets). Este otro iría en Blogger antes del cierre de la etiqueta SKIN. Entre ambas es dónde siempre encontraras las propiedades de estilo de los distintos elementos.

      Saber más.

      Eliminar
  4. hola Olo te quería hacer una pregunta, tendrás un codigo para que un boton me habra una imagen jpg en la misma ventana pero como un pop up pero solo la imagen no toda la ventana.
    saludos.

    ResponderEliminar
    Respuestas
    1. A ver si esto te sirve:
      http://www.oloblogger.com/2009/12/simular-una-venta-modal.html

      Eliminar
    2. lo que pasa es que quiero la transparencia de un png osea solo que el botón me habrá la imagen y ya.
      Sin ventana modal sin ninguna ventana espero y me haya dado a entender.
      espero y me puedas ayudar.

      Eliminar
    3. Pues no, sigo sin entenderte. Por favor, detalla todo lo que quieres hacer y el efecto que quieres conseguir.

      Eliminar
  5. Buenas tardes, recurro a ti porque necesito que me ayudes, veras, me dijeron que mi blog se veia mal y he cambiado la resolucion de pantalla y el ancho del blog, me ha descuadrado un monton de cosas, yo lo he intentado antes de molestarte pero soy incapaz de arreglarlo sola, debajo de cada entrada tengo botones para compartir y necesito por favor que me ayudes a alinearlos bien, te dejo la imagen para que veas como estan despues de mi intento de arreglo:
    https://23234fd6-a-62cb3a1a-s-sites.googlegroups.com/site/teofermi1/fotos/botones1.jpg

    Espero no molestarte ¿me ayudas?
    un afectuoso saludo

    ResponderEliminar
    Respuestas
    1. Tienes en tu código un pequeño batiburrillo. Quizás lo más rápido es que borres lo que tienes dentro de tu post-footer-line-3 y en su lugar utilices esto otro. Luego, cuando veas que las cosas cuadran, añades los de Blogger si quieres, aunque son los mismos.

      Eliminar
  6. Lo he intentado pero tengo tal lio que no se por donde empezar, quito cosas y me dice que no se puede analizar plantilla

    ResponderEliminar
    Respuestas
    1. Tienes un mensaje en Google+

      Eliminar
    2. ¿recibiste el enlace?

      Eliminar
    3. Si y te envié un segundo mensaje...

      Eliminar
    4. ¿te refieres al que me decias que el enlace no funcionaba? te lo mande de nuevo, espero que ahora lo haya hecho bien...

      Eliminar
  7. Porfa no te olvides de lo mio

    Un beso Oloman

    ResponderEliminar
    Respuestas
    1. No me olvido, pero nunca ando sobrado de tiempo. Al contrario, necesito días de 36 horas, aunque en esta ocasión te contesté. Te reenvío el mensaje.

      Eliminar
  8. Si quiero poner una imagen como rollover css que hago?

    ResponderEliminar
    Respuestas
    1. Facundo, pon en el buscador de la izquierda la palabra "rollover" y te saldrán al menos un par de opciones adicionales a esta. Seguro que alguna te cuadra.

      Eliminar
  9. Holaa, una consulta.. el color del texto del boton no anda. Parece que toma el mismo color del Titulo de entrada(hover, visited, link) Que puedo hacer?

    ResponderEliminar
    Respuestas
    1. Debería ir igual que lo hace aquí ¿alguna dirección concreta para que lo vea?

      Eliminar