9 botones personalizados para compartir en redes sociales con CSS y JavaScript

Cada sitio debe incluir algunos botones sociales para aumentar el intercambio en la web. Pero los botones predeterminados para compartir no son tan buenos y cada uno tiene un estilo diferente según la marca de las redes.

Es por eso que hemos seleccionado esta pequeña colección de botones para compartir personalizados que puede formatear y reutilizar en su propio sitio. Si está buscando hermosos botones para compartir, estas plantillas ofrecen un excelente punto de partida.

1. Compartir lado

Primero está una de mis técnicas favoritas creada por el desarrollador Michael Schofield. Esta interfaz de usuario fija de la insignia social compartida es muy común en los grandes blogs y sitios de revistas.

Estas insignias sociales pueden permanecer ubicadas en la parte superior cerca del título o pueden desplazarse hacia abajo con el usuario. No he encontrado ningún estudio de caso que compare las diferencias, pero me imagino que los botones fijos ven un mayor número de acciones. Y de cualquier manera, están tan bien diseñados que no se ven como spam o calzados en el diseño.

Esta es probablemente la mejor plantilla para comenzar si tiene un blog y desea algunas insignias personalizadas para compartir.

2. Botones de imagen

Otro estilo popular para compartir es volver a publicar imágenes encontradas en un sitio web. Esto es popular en Pinterest, pero puede funcionar bien para Facebook y Twitter, e incluso para Google+.

Estos botones de imagen son diseños personalizados que utilizan CSS3 puro y algunos logotipos de fondo para cada uno. Todavía no se conectan a ninguna red social, pero los enlaces de anclaje se pueden programar fácilmente para compartir en redes sociales.

El diseño es realmente mi enfoque aquí porque se ven fenomenales adjuntos a cualquier imagen. Además, la ubicación realmente revela la idea de que estás tratando de alentar a que se comparta la imagen en sí, no solo la publicación.

3. Alternar acciones

Todos hemos visto esos widgets para compartir de WordPress usando el pequeño icono para compartir y el menú desplegable. Después de un tiempo, pueden volverse rancios, por lo que es útil mezclarlos un poco.

Con este fragmento, puede cambiar el estilo de su intercambio social con una animación personalizada y un menú oculto. Es perfecto para cualquiera que tenga un sitio que desee fomentar el uso compartido en varias redes.

Cada ícono ha sido diseñado en CSS puro y la animación se controla a través de jQuery. Debería poder simplemente copiar/pegar esto en cualquier diseño y hacerlo funcionar. Quedaría bien junto al título de un artículo, o incluso en la parte inferior después de que la gente termine de leer. De cualquier manera, es seguro que aumentará las acciones sociales en todos los ámbitos.

4. Animaciones circulares

Para un poco de animación divertida, echa un vistazo a estos botones circulares creados por Stephane Lyver.

Cada botón tiene su propio efecto de animación y todos pueden combinarse perfectamente en cualquier diseño. Incluso puede cambiar los colores de fondo y de los iconos para que se destaquen sobre un fondo blanco liso.

Todo se ejecuta en CSS puro y los íconos se extraen de Font Awesome a través de Bootstrap.

Tenga en cuenta que estos botones tampoco se conectan directamente a los enlaces para compartir en redes sociales, pero esto se puede solucionar fácilmente con el código correcto.

5. Botones simples para compartir

Breve, dulce y directo describe mejor estos botones para compartir.

Usan íconos SVG simples del conjunto de íconos Ionicons. Pero no necesita Ionic ni JavaScript para que funcionen.

En su lugar, usan el valor href junto con nuevas opciones de pestañas para abrir enlaces para compartir directamente en el navegador. No se requiere JavaScript, no se requieren SVG torpes.

Si profundiza en el conjunto de iconos de Ionic, incluso puede encontrar otros iconos sociales que desee agregar. Además, tiene control total sobre los estilos en CSS para que pueda cambiar el tamaño, el relleno, el color de la fuente y casi todo lo demás.

6. Sociales ocultos

El desarrollador Chris Sevilleja creó estos botones sociales ocultos con CSS puro.

Algunos sitios web utilizan esta técnica para incrustar insignias de uso compartido predeterminadas dentro de iconos más pequeños. Pero es cierto que esta es una animación única, por lo que no es una tendencia muy común.

El código es muy fácil de configurar y todo se ejecuta a través de CSS para que tengas el control total. Chris incluso desarrolló un bolígrafo similar para las insignias sociales de Google+.

Ambos fragmentos de código son fantásticos para casi cualquier sitio web y las animaciones se ejecutan en todos los navegadores compatibles con CSS3.

7. Colores de fondo flotante

Ahora, aquí hay una configuración de intercambio social realmente única donde el color de fondo cambia según el botón que se desplaza.

Cada botón tiene su propio ícono personalizado extraído de Font Awesome, por lo que incluso puede expandir este conjunto para incluir otros íconos relacionados. También me gusta mucho este enfoque porque tiene el respaldo de JavaScript para los cambios de desplazamiento.

Pero el desarrollador web Christopher Grabinski creó una alternativa CSS pura que funciona exactamente igual (en navegadores compatibles).

No creo que esta técnica se vea muy bien en un blog más grande, aunque puede funcionar en sitios más pequeños o publicaciones de blog breves.

8. Compartir menú flotante

El desarrollador Kyle Lavery creó un increíble botón flotante para compartir que recuerda el enfoque de Google para los volantes de material.

Esto usa un poco de JavaScript, pero solo tiene 5 líneas y no es muy complejo. La magia de la animación está en el CSS, que puede personalizar según sus necesidades.

Lo que también es interesante es que el HTML sin procesar es increíblemente simple. Tiene un contenedor principal para compartir y luego usa elementos div para los botones. Básicamente, 5 líneas de HTML y 5 líneas de JavaScript, combinadas con un montón de CSS, te dan este hermoso efecto.

Absolutamente una de las mejores funciones para compartir en redes sociales que he visto y el estilo de diseño de materiales lo hace aún más genial.

9. Botones para compartir en 3D

Lo último en mi colección es este diseño 3D que usa transformaciones CSS 3D junto con botones sociales.

El desarrollador Fabrizio Bianchi creó estos botones utilizando CSS puro desde los íconos hasta las animaciones de transformación. Los íconos principales son de Font Awesome y el único código JS es para incrustar los botones en el interior.

Pero en general, esta es una solución CSS pura que debería funcionar bien en cualquier sitio. No a todo el mundo le gusta el efecto 3D, pero si se adapta a su diseño, hágalo.