Componente de botones neumórficos
Un componente de botón con un estilo de diseño neumórfico con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
<div class="flex space-x-4">
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 1</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 2</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 3</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
</div>
</div>
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.
3D_Healthcare_Buttons_Component
Un complejo componente de botones inspirado en 3D para aplicaciones de atención médica, con un diseño monocromático en blanco y negro con un color de acento brillante, diseño receptivo y compatibilidad con modo oscuro.
ArtDecoECommerceButtons
Un complejo conjunto de botones de comercio electrónico inspirados en el Art Deco con patrones geométricos y lujosos tonos Ocean/Blue, optimizados para la capacidad de respuesta y el modo oscuro.