NeumorfismoComoReacciónBotones
Componente responsivo de botones de Me gusta / Reacción para blog / contenido con soporte de tema oscuro y diseño de neumorfismo.
Código HTML
<div class="flex items-center justify-center p-4 dark:bg-gray-900">
<div class="flex space-x-4">
<!-- Like Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
<span>Like</span>
</button>
<!-- Celebrate Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
<span>Celebrate</span>
</button>
<!-- Insightful Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
<span>Insightful</span>
</button>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>Componentes relacionados
Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta/Reacción con estilo de diseño Glassmorphism, con efectos de vidrio esmerilado, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
Botones de reacción skeuomórfica
Un conjunto de botones de "me gusta" y "reacción" con un estilo de diseño skeuomórfico, que admite diseños responsivos y modo oscuro. Los botones se implementan puramente con HTML y Tailwind CSS, sin JavaScript. El modo oscuro se maneja a través de clases CSS. Las imágenes de marcador de posición se utilizan para los avatares.
Botones Me gusta/Reacción
Componente de botones Me gusta/Reacción con microinteracciones, capacidad de respuesta y compatibilidad con temas oscuros