Botón de Twitter efecto Rollover con CSS

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Botón de Twitter efecto Rollover con CSS

El efecto rollover consiste en hacer cambiar un objeto al pasar el mouse sobre él, esto resulta muy atractivo y sofisticado si se aplica bien, aunque existen varias formas de hacerlo la más fácil y efectiva es mediante unas pocas líneas de código CSS. Este efecto es muy usado en los botones de redes sociales de muchas páginas, por ende; no es una novedad aquí, pero la intención es mostrar cómo se hace y que todos puedan aplicar su propio estilo. Esta vez lo haremos creando un atractivo botón de twitter pero básicamente el fundamento es el mismo para cualquier objeto que queramos aplicarlo.

Para hacerlo usaremos una imagen oficial del repositorio de recursos de twitter a la cual le aplique una desaturación usando Photoshop para que quedara en gris. Para referencia coloque los nombre: “twitter (imagen a color), twitter-gris (imagen gris)”

Ahora bien, para hacer el llamado a la imagen usaremos la etiqueta HTML ‘a’ a la cual le agregaremos una clase llamada ‘boton-twitter’ que luego definiremos mediante CSS. También agregamos el enlace a nuestra cuenta de twitter que donde llevara al usuario cuando haga clic sobre él.

El código para llamar a nuestro botón será este:

<html>
<a href="http://www.twitter.com/ibloglabs" class="boton-twitter"></a>
</html>

Ahora nos divertimos con CSS. Haremos que el fondo se muestre como un bloque para que tenga los efectos de vínculo, además definimos el ancho, el alto y la ruta de nuestra imagen que en mi caso está colocada en la misma carpeta donde se mostrara el botón.

a.boton-twitter{
	display:block;
	 width: 186px;
	 height: 162px;
	 background-image:url(twitter-gris.png);
}

El código anterior mostrara la imagen estática con el vínculo a nuestra cuenta de twitter, ahora vamos a hacer el efecto rollover. Solo copiamos y pegamos el mismo código y modificamos las líneas ‘a.boton-twitter:hover’ y la ruta de la imagen para que muestre nuestra imagen en color ‘background-image:url(twitter.png);’ de esta forma.

a.boton-twitter:hover{
	display:block;
	 width: 186px;
	 height: 162px;
	 background-image:url(twitter.png); 
}

El CSS completo debería quedar así:

a.boton-twitter{
	display:block;
	 width: 186px;
	 height: 162px;
	 background-image:url(twitter-gris.png); 
}
a.boton-twitter:hover{
	display:block;
	 width: 186px;
	 height: 162px;
	 background-image:url(twitter.png); 
}

Con este simple código podremos hacer nuestros propios botones o bien pack de ellos hacia las redes sociales, como también cualquier otro objeto, es simple y se puede integrar a cualquier sitio.

Etiquetas:,

Trackback desde tu sitio.

Comentarios (4)

  • Miguel

    |

    Hola amigo,

    Quiero darte las gracias por compartir este interesante artículo. Vengo leyendo su bitácora desde hace poco con atención y estima. Felicidades.

    Tengo una pregunta:

    Me gustaría saber cómo puedo hacer que los iconos de la red social aparezcan ordenados de forma horizontal, y no vertical que es como me aparece cuando edito cada uno de forma individual. Aquí muestro una imagen de cómo quiero ordenar los botones:

    http://i48.tinypic.com/sqh6o2.jpg

    ¡ Gracias, felices fiestas y buen año 2013 !

    Responder

    • Jose M Ramirez

      |

      Hola Miguel, hay muchas formas de hacerlo y depende de que tan sofisticado quieras tus botones y que lenguaje quieras usar. Una muy simple es crear un div con el ancho de las tres imagenes y el alto de una, dentro incluyes las imagenes con su enlace en html, asi puedes meterlas facilmente en un widget de WP, modulo Joomla o cualquier otra plataforma.

      Una forma mas sofisticada es usar CSS, creando una lista en HTML y usando display: inline; la lista se muestra de forma horizontal.

      Si necesitas mas detalles con gusto te hago un tutorial mas especificado.

      Saludos y gracias por leerme.

      Responder

  • Miguel

    |

    Apreciado amigo,

    Quiero darte las GRACIAS por disponer parte de tu tiempo. Sinceramente, no tengo conocimientos de programación. Tengo editado el código que hace la llamada a los iconos en la caja de “Texto” del Widget (WordPress). Son tres iconos de redes sociales 50px 50px. Y el código CSS lo edito en mi “custom.css” de forma individual para cada icono …y como resultado me aparecen de esta manera:

    http://i45.tinypic.com/vcriw0.jpg

    Y me gustaría que aparezcan de forma horizontal, aquí muestro un ejemplo:

    http://i48.tinypic.com/sqh6o2.jpg

    Sería genial lo del nuevo tutorial, amigo, me arrojarás luz.

    Con mi agradecimiento anticipado…

    Te deseo unas Felices Fiestas, a tí y toda tu familia. Muchos abrazos y buenos deseos para el año que entra.

    Saludos.

    Responder

    • Jose M Ramirez

      |

      Gracias a ti por feedback :-) esta misma semana empiezo a trabajar en las distintas formas de hacerlo para que tengas varias opciones y todas compatibles con WP.

      Felices fiestas hemano.

      Saludos.

      Responder

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs