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

Sí

Soporte para Modo Oscuro

líneas

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

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

150px

HTML

líneas

CSS

líneas

JavaScript

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>

              

                .social-share-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-btn {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.3s;
}

.social-btn:hover {
  transform: scale(1.1);
}

.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.linkedin { background-color: #0077b5; }
.pinterest { background-color: #bd081c; }

              

                document.addEventListener('DOMContentLoaded', () => {
  const socialButtons = document.querySelectorAll('.social-btn');
  socialButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      e.preventDefault();
      const url = window.location.href;
      const text = document.title;
      const shareUrl = button.href;
      window.open(shareUrl + '?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text), '_blank');
    });
  });
});

              

Compatibilidad del Navegador

Chrome

≥ 61

Firefox

≥ 60

Safari

≥ 10.1

Edge

≥ 16

Fragmentos de Código Relacionados

Tarjeta de Producto Animada

Tarjeta de producto moderna con efectos al pasar el mouse, vista rápida y funcionalidad de agregar al carrito, perfecta para listados de comercio electrónico.

Intermedio

22/8/2025

Tarjetas de Contenido

product card ecommerce animation hover

Ver Código

Featured

Botones de Compartir en Redes Sociales Animados

Botones modernos para compartir en redes sociales con animaciones suaves y efectos interactivos, perfectos para publicaciones de blog y compartir contenido.

Principiante

22/8/2025

Redes Sociales