call-to-action
beginner
social
media
share
buttons
hover
Categoría · Llamadas a la Acción Nivel de Dificultad · Principiante Publicado el · 18 de agosto de 2025

Botones para Compartir en Redes Sociales

Un conjunto de elegantes botones para compartir en redes sociales con efectos de desplazamiento.

#social #media #share #buttons #hover

Diseño Responsivo

Soporte para Modo Oscuro

No

líneas

41

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

150px

Resumen

Un conjunto de elegantes botones para compartir en redes sociales con efectos de desplazamiento.

Cómo usarlo

  1. Copia el marcado HTML en tu página.
  2. Pega el CSS en tu hoja de estilos y verifica que los selectores coincidan con el HTML.
  3. Pega el JavaScript y cárgalo después del HTML.
  4. Ajusta espaciados, colores y textos para tu sistema de diseño.

Consejos de personalización

  • Renombra las clases para evitar conflictos con tu CSS existente.
  • Reemplaza colores fijos por variables CSS para facilitar el tema.
  • Comprueba el diseño en 320px, 768px y 1024px.

HTML

6

líneas

CSS

23

líneas

JavaScript

12

líneas


                <div class="social-share-buttons">
  <a href="#" class="social-btn facebook">Facebook</a>
  <a href="#" class="social-btn twitter">Twitter</a>
  <a href="#" class="social-btn linkedin">LinkedIn</a>
  <a href="#" class="social-btn pinterest">Pinterest</a>
</div>

              
6líneas
262caracteres
HTMLIdioma

Compatibilidad del Navegador

Chrome

>= 61

Firefox

>= 60

Safari

>= 10.1

Edge

>= 16

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas ->