:: CP - Recursos Web :: - Botones animados Facebook y twitter

Botones animados Facebook y twitter

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Botones animados Facebook y twitter

Fecha: 2013-07-20

Creditos: http://Adan-2994.es.tl

Recurso para: Formas Css

Garantia: SI ?

Descripción:

Coloca dos iconos al costado de tu sitio que al pasar el cursor por encima sobre salen, incluye las URL de tus redes sociales y así gana más seguidores y visitas!

- Codigo 01: Por encima de la pagina o extra head

<style type="text/css">
#facebookboton{cursor:pointer;background-size:100px;position:absolute;
background-image:url("https://img.webme.com/pic/c/cssplantillas/bface.png");
left:-50px;width:100px;height:100px;opacity:0.5;}
#twiterboton{cursor:pointer;background-size:100px;
background-image:url("https://img.webme.com/pic/c/cssplantillas/btwi.png");
position:absolute;left:-50px;width:100px;height:100px;opacity:0.5;}</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){face=$("#facebookboton");twiter=$("#twiterboton");
  posicion=parseInt(face.attr("top"));
  face.css("top",posicion+"px");
  twiter.css("top",(posicion+100)+"px");
  face.mouseenter(function() {face.stop().animate({"left":"-10px","opacity":1},300);}).mouseout(function() {
  face.stop().animate({"left":"-50px","opacity":.5},170);});
  twiter.mouseenter(function() {twiter.stop().animate({"left":"-10px","opacity":1},300);}).mouseout(function(){twiter.stop().animate({"left":"-50px","opacity":.5},170);});});</script>
<a href="URL DE TU FACEBOOK" target="_blank"><div top="10" id="facebookboton"></div></a>
<a href="URL DE TU TWITTER" target="_blank"><div id="twiterboton"></div></a>

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo

)

Descarga no disponible

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Solo edita las URL, si sabes CSS edita lo que puedas, de lo contrario no recomendamos editar.
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 151 visitantesGracias por tu visita!

Recomendamos:

| CERRAR