Botones sociales en CSS poco comunes

Mira estos diferentes y curiosos botones de redes sociales hechos en CSS para que puedas aplicar en los próximos proyectos. 


Los iconos de compartir son parte esencial dentro de un sitio, puede hacer que el contenido llegue a mas personas. Por eso, para esta ocasión les comparto una serie de botones o iconos para compartir poco comunes, curiosos o que llaman la atención.

Son una variedad botones de redes sociales hechos en CSS y que tienen su código disponible para que lo puedas adaptar en cualquiera de los proyectos que quieras desarrollar. Cada una de estos iconos tiene características diferentes, algunos serán muy útiles y otros no tanto, pero se los comparto por la simple curiosidad de ver o hacer algo diferente a lo que vemos comúnmente.

Vale la pena decir que los podrás usar en cualquier documento en HTML, así como los puedes adaptar para utilizarlos tanto en blogger, como wordpress, etc.

Puedes ver el preview de como funciona cada uno de estos botones. También puedes ver el código de implemetación de cada uno de estos iconos o botones en su respectivo enlace.

Social swatchbook



Este elemento de iconos sociales, nos muestra los botones para compartir a manera de un libro de muestras, ubicando así en cada hoja de muestras un icono social.

See the Pen Social swatchbook by Hugo Giraudel (@HugoGiraudel) on CodePen


Fuente

Social Share



En estilo flat design, esta caja de botones para compartir, nos muestra y oculta los botones sociales con un simple clic sobre el icono de compartir.

See the Pen Social Share by Amit Agarwal (@labnol) on CodePen


Fuente



Social Navigation


Barra de navegación con los botones de compartir de las principales redes sociales ubicados de forma vertical

See the Pen Social Navigation by Marco Biedermann (@m412c0) on CodePen



Fuente



Wheel of social fortune


La rueda de la fortuna social. Un curioso widget que le puedes agregar a tu sitio para que de una forma interactiva los usuarios elijan al azar la red social con la que puedes compartir. Prueba tu suerte y da clic sobre la ruleta


See the Pen The wheel of social fortune by Karsten Buckstegge (@MrBambule) on CodePen



Fuente

Iconos sociales animados


Botones de 'seguir' en en redes sociales animados que con un poco de Javascript nos dan un efecto hover de slide horizontal.

See the Pen Animated Social Icons by designil (@designil) on CodePen



Fuente

Botones sociales con efecto hover


Este es un elegante set de botones para compartir en estilo plano de las redes sociales con un efecto corredizo.

See the Pen Social buttons with hover by Marius Balaj (@mariusbalaj) on CodePen



Fuente

Flat Social button animation


Sencillo, elegante y minimalista widget de seguidores en Facebook, Twitter, Google+ y Linkedin, con efecto de transformación en hover.

See the Pen Fancy Flat Social Button Animation by Clément Guillou (@cguillou) on CodePen



Fuente

Social Slide


Elegante set de botones de seguir en Facebook y Twitter con un efecto de slide up en CSS.

See the Pen Social Slides by Eduard Mayer (@codewunder) on CodePen



Fuente


Social Buttons Slide


Caja de botones para compartir en redes sociales con efecto de aparición en slide hacia abajo.

See the Pen Social Buttons Slide by Marius Balaj (@mariusbalaj) on CodePen


Fuente

Animation social icons


Un set muy elegante de botones para seguir, con una animación en JS de efecto hover en slide up.

See the Pen Animated Social Icons by Ryan Bishop (@ryanbishop) on CodePen



Fuente

Social icon animation


Iconos sociales animados en CSS. Efecto de borde de color que aparece gradualmente y repetitivo .Logrado en CSS.

See the Pen Social Icon Animation by Jitendra (@berdejitendra) on CodePen

Fuente


Social section


Botones sociales con forma de rombo, con un sencillo efecto hover. Sencillo y elegante elemtento que quedaria bien en un sitio con elementos minimalistas.

See the Pen Social Section by Dominik Dąbrowski (@Murkee) on CodePen

Fuente


Y si te gustó este articulo, no olvides compartirlo con tus amigos o sígueme en Facebook o Twitter para no perderse de próximas actualizaciones.

Tal vez te interese:

39 comentarios

  1. Intento implementar unos de los botones y no me resulta..

    ResponderBorrar
  2. Dime cual es el que quieres implementar a ver si te puedo ayudar

    ResponderBorrar
    Respuestas
    1. hola jhon te felicito buenos los botones y sus efectos,, pero tengo una duda una vez que pego todos los codigos en que parte del codigo html pego la URL de cada una de mis redes sociales lo que pasa que no veo donde colocarla aparece una sola que es el icono de twitter pero en las demas no se ve si me puedes ayudar

      Borrar
  3. Muy buen Post amigo, Me interesan algunos, pero me he decidido por el animación en JS de efecto hover en slide up. Ahora estoy intentando integrarlo con el codigo HTML, luego me paso y cuento que tal.

    Un saludo y hasta la proxima!!

    ResponderBorrar
    Respuestas
    1. Gracias amigo por leer el post, y cuando termines me puedes colocar el link para ver como te quedó, un saludo!

      Borrar
  4. Hola, me gustaron mucho los botones, ¿de que forma los implemento a mi blog o donde tengo que pegar el código?

    ResponderBorrar
    Respuestas
    1. Primero buscas en el código HTML el lugar en donde quieres que aparezca y ahí solo pegas e HTML, luego vas a la parte del CSS (es decir antes del cierre del head ) y ahí pegas el CSS

      puedes ver en este blog de pruebas la utilización de uno de estos botones http://bit.ly/jLabs

      Borrar
  5. Buen aporte, me gustaría saber como usarlos en una plantilla de blogger

    ResponderBorrar
  6. están buenísimos los iconos sociales. muchas gracias

    ResponderBorrar
  7. Gracias, llevaba tiempo buscando unos iconos así de elegantes y en concreto el: set de botones para compartir en estilo plano de las redes sociales con un efecto corredizo.

    MI pregunta es. ¿Cómo los instalo en mi blog?, está hecho con Bloguer; eso sí, quiero que sepas que NO SÉ DE CÓDIGOS, NI DE PROGRAMACIÓN; por esa razón te pido los pasos a seguir de instalación.

    Me gusta tu blog

    Un Saludo desde España

    Te agradecería enormemente me indicarás los pasos a seguir,

    ResponderBorrar
    Respuestas
    1. Hola Trinidad,
      Una saludo muy especial. Respecto a tu duda aquí te dejo un tutorial para instalar los botones sociales para blogger. copea el siguiente link y pegalo en tu navegador http://goo.gl/V8zYHW

      Borrar
  8. WoW ni somo como llegue aqui pero que hermoso sitio este gracias al admin

    ResponderBorrar
  9. Muy buen articulo, exelente aporte, me encanto el ANIMATION SOCIAL ICONS
    por las dudas tendras las fuentes de esos iconos? me interesaria conseguir el de vimeo, linkedin y tumblr en ese formato
    muchas gracias

    ResponderBorrar
  10. hola, una pregunta.
    en vez de poner le LIKE a facebook no se puede compartir en facebook??
    use "BOTONES SOCIALES CON EFECTO HOVER" como hago para que se pueda compartir en facebook??

    gracias

    ResponderBorrar
    Respuestas
    1. Solo debes cambiar el código de la función Like por el código de "Compartir".
      En este link puedes ver los códigos de las herramientas sociales de Facebook: https://developers.facebook.com/docs/plugins

      Borrar
  11. Muy útiles, funcionan perfectamente, muchas gracias!

    ResponderBorrar
  12. que... capo eh... 10..puntos.. el mejor sitio..q visite

    ResponderBorrar
  13. amigo tengo una duda espero puedas ayudareme el la rueda de la suerte de enlaces la rueda se divide en 4 partes es posible dividirla en mas partes como 6 u 8 partes gracias esa es mi pregunta espero puedas ayudarme

    ResponderBorrar
  14. este es el que mas me gusta http://4.bp.blogspot.com/lgDBI5d_3Zw/UpPXCuo_A0I/AAAAAAAAVqw/NMUkHWxVrRs/s640/share_buttons_10.png

    pero pero quiere el de youtube y google plus y no estan aver se puedes ponerlos por favor

    ResponderBorrar
    Respuestas
    1. Hola Youness, no pude ver la imagen que pones en el link.

      Borrar
    2. los de la posicion numero diez empezando por arriba de la pagina y la tercera posicion empezando por abajo
      tienen el fondo negro son ventanillas que se suben para arriba cuando paso el raton por encima

      Borrar
  15. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  16. Habrá que ver que sucede y ver si son buenos

    ResponderBorrar
  17. Excelentes botones, le tuve que quitar las etiquetas de section y estilos de etiquetas generales porque me cambiaba todo el diseño, pero nada de otro mundo. Gracias por el aporte :)

    ResponderBorrar
  18. Buen post, amigo. Me gustaron varios, pero ando en busca de los 'botones de compartir' que utiliza esta página web (http://www.muycomputer.com) aquí te dejo uno de sus post (http://www.muycomputer.com/2015/09/20/mejorar-el-rendimiento-de-un-pc-lento) para que veas en el final de el articulo los botones que utilizan, tienen facebook, twitter, Linkedin y Google+ me gusta mucho por qué tiene un efecto corredizo con el logo de las redes sociales, ¿me podrías ayudar a encontrarlo? Saludos desde Caracas, Venezuela.

    ResponderBorrar
  19. Buen post, amigo. Me gustaron varios, pero ando en busca de los 'botones de compartir' que utiliza esta página web (http://www.muycomputer.com) aquí te dejo uno de sus post (http://www.muycomputer.com/2015/09/20/mejorar-el-rendimiento-de-un-pc-lento) para que veas en el final de el articulo los botones que utilizan, tienen facebook, twitter, Linkedin y Google+ me gusta mucho por qué tiene un efecto corredizo con el logo de las redes sociales, ¿me podrías ayudar a encontrarlo? Saludos desde Caracas, Venezuela.

    ResponderBorrar
  20. hola jhon felicitaciones de verdad ,, una pregunta ya istale este pack SOCIAL BUTTONS SLIDE, pero como hago para enlazarlos a mis redes sociales porque no distingo en que parte pongo el url de cada red social en html si me puedes ayudar gracias

    ResponderBorrar
  21. Te felicito por este articulo realmente es estupendo ver lo que se puede hacer con los botones sociales,a los que siempre acabo dándoles vueltas y poniendo los simples.

    ResponderBorrar
  22. Muy bueno la verdad... Pero ya los probaste??.. Lo que pasa que hago todo correcatamente y siempre falla algo en los botones, es decir si salen y se aplican todos los efectos y los estilos correctamente pero no me queda igual como lo muestras.. Pero con todo buena informacion

    ResponderBorrar
  23. Excelente, muy buena la selección de botones. Gracias por compartir!

    ResponderBorrar
  24. Muy bonitos e intersantes amigo pero tengo una pregunta, quise usar el Flat Social button animation, todo esta bien pero no me aparece los iconos de las redes sociales y no se porque :/ y también me gustaria saber como enlazo mis redes al darle click. Gracias de antemano :)

    ResponderBorrar
  25. donde pego el codigo js, debe llevar algun encabezado?

    ResponderBorrar
  26. es que los iconos de las redes no se mueven salen estáticos

    ResponderBorrar


EmoticonEmoticon