Componente Botones
Componente de botones de neumorfismo con esquema de color monocromático para fines de portafolio, responsivo con soporte de tema oscuro.
Código HTML
<section class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-4">
<button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Primary Button</button>
<button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Secondary Button</button>
</div>
<style>
.shadow-neumorphic {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
}
.hover\:shadow-neumorphic-hover:hover {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .hover\:shadow-neumorphic-dark-hover:hover {
box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
}
</style>
</section>Componentes relacionados
Componente Botones de morfismo de vidrio
Botones de morfismo de vidrio que usan tonos tierra para un sitio de portafolio receptivo con modo oscuro
Componente Botones
Skeuomorphism Componente de botones de tablero complejos análogos con diseño receptivo y soporte de tema oscuro.
Botones interactivos de la galería de fotos
Un conjunto de botones interactivos y responsivos diseñados para galerías de fotos y portafolios de fotógrafos, con una paleta de colores bosque/verde y sutiles efectos de microinteracción para la participación del usuario. Incluye soporte para modo oscuro.