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.