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
Botones de redes sociales de neumorfismo
Un componente de botón simple al estilo Neumorphism para interfaces de redes sociales, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS. El botón utiliza un esquema de color análogo y sombras sutiles para crear un aspecto suave y extruido.
Componente Botones de morfismo de vidrio
Un componente de botón de Glassmorphism simple y receptivo con colores pastel y soporte de modo oscuro usando Tailwind CSS.