Añadir Botones Animados Usando Tooltips con CSS3

De nuevo vengo con un nuevo cacharrito, siguiendo el hilo de la entrada anterior sobre los Tooltips o también llamada descripción emergente, que funcionan al situar el cursor sobre algún elemento gráfico, ya sea una imagen gráfica, texto, o demás elementos, mostrando, una ayuda adicional para informar al usuario de la finalidad del elemento, sobre el que se encuentra el cursor, al posicionar el puntero por encima del elemento. Después de está breve descripción, sobre que es un Tooltip, denominado así por los anglosajones, vayamos a ver unos botones sociales, con estos globos de ayuda de información, extra, al pasar el cursor por encima, cómo hemos mencionado. He preparado una demostración para copiar y pegar, basándome en el gran tutorial de Tympanus, sobre este tema en cuestión. Mirar...

Demo: botones sociales con Tooltip

• Hazte fan en el face!
• Seguir en Google+!
• Artículos en Twitter?
• Suscripción vía RSS!

Ahora añadiremos estos fantásticos botones en Blogger!

1. Entra en Blogger.
2. Y ves a Diseño, luego a Añadir un Gadget.
3. Copia y pega el siguiente código.
4. En añadir un gadget, añades el siguiente código en la opción HTML & Javascript:
5. Luego haz los cambios pertinentes, cambia las URL de tu redes sociales.

<style type="text/css">
ul.tt-wrapper {list-style:none;padding: 0;width:300px;height: 70px;margin: 80px auto 0 auto;}
ul.tt-wrapper li {float: left;}
ul.tt-wrapper li a {display: block;width: 64px;height: 64px;margin: 0 2px;outline: none;position: relative;}
ul.tt-wrapper li a span {width: 100px;height: auto;line-height: 20px;padding: 10px;left: 50%;margin-left: -70px;font-family: Georgia, serif;font-weight: 400;font-style: italic;font-size: 14px;color: #000;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;    border: 4px solid #ddd;background: rgba(255,255,255,0.3);border-radius: 5px;position: absolute;pointer-events: none;    bottom: 100px;    opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.1);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
ul.tt-wrapper li a span:before, ul.tt-wrapper li a span:after {content: ''; position: absolute;bottom: -15px;left: 50%;margin-left: -9px;    width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
ul.tt-wrapper li a span:after {bottom: -14px;margin-left: -10px;border-top: 10px solid #ddd;}
ul.tt-wrapper li a:hover span {opacity: 0.9;bottom: 70px;}
</style>

<ul class="tt-wrapper">
<li><a href="url-de-facebook" target="_blank"><img border="0" height="64" src="https://lh5.googleusercontent.com/-V8lXxXQLCYc/U5Tko0stbCI/AAAAAAAAUb0/AAOjonm_DPc/s64-no/125754-matte-white-square-icon-social-media-logos-facebook-logo_opt.png" width="64" />Hazte fan en el face!</a></li>
<li><a href="url-de-google" target="_blank"><img border="0" height="64" src="https://lh5.googleusercontent.com/-hmxhBOxtyoM/U5Tk8-_hvoI/AAAAAAAAUcI/zKD9INQMhOA/s64-no/125767-matte-white-square-icon-social-media-logos-google-g-logo_opt.png" width="64" />Seguir en Google+!</a></li>
<li><a href="url-de-twitter" target="_blank"><img border="0" height="64" src="https://lh4.googleusercontent.com/-eRb7jxs5FjQ/U5Tl0TXwNjI/AAAAAAAAUc0/_XKhA7JrPJU/s64-no/125824-matte-white-square-icon-social-media-logos-twitter-bird3_opt.png" width="64" />Artículos en Twitter?</a></li>
<li><a href="url-del-feed"><img border="0" height="64" src="https://lh6.googleusercontent.com/-10yEfhKcR-I/U5Tlme8GefI/AAAAAAAAUcc/x3nxPvhqvaE/s64-no/125802-matte-white-square-icon-social-media-logos-rss-basic_opt.png" width="64" />Suscripción vía RSS!</a></li>
</ul>

Tympanus Demos
Get free premium widgets for your blog and website.