Componente de botones para compartir en redes sociales
Un componente de botones de compartir en redes sociales receptivo con efectos de glassmorphism, que admite temas claros y oscuros.
Código HTML
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
</a>
<a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
</a>
<a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
</a>
<a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1F2937;
}
}
</style>
Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente de botón de compartir en redes sociales en escala de grises 3D simple y receptivo para paneles con soporte para modo oscuro.
Componente de botones para compartir en redes sociales: música/audio
Un conjunto de botones para compartir en redes sociales diseñados para plataformas de música y audio, con una estética de Material Design con colores apagados y compatibles con el modo oscuro. Incluye botones para plataformas comunes de uso compartido como Facebook, Twitter y correo electrónico.
Brutalismo Botones para compartir en redes sociales
Componente de botones para compartir en redes sociales con estilo brutalismo, efectos responsivos y soporte para temas oscuros, no se necesita javascript