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
Retro_Rainbow_Buttons_Component
Una colección de botones de arcoíris degradados de temática retro diseñados para galerías de fotografía y portafolios, con una complejidad moderada y una capacidad de respuesta total y compatibilidad con el modo oscuro.
Componente Botones
Componente de botones responsivos con diseño de materiales, combinación de colores triádica y compatibilidad con temas oscuros.
Componente Botones
Un componente de botones diseñado con elementos 3D y colores vibrantes para interfaces de redes sociales, compatible con temas oscuros y diseño receptivo.