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.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-4">
<button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
Button 1
</button>
<button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
Button 2
</button>
</div>
</div>Componentes relacionados
Componente Botones de Material Design
Componente de botones de diseño de materiales en tonos tierra para redes sociales
Componente Botones
Componente de botones responsivos con diseño de materiales, combinación de colores triádica y compatibilidad con temas oscuros.
Componente Botones
Skeuomorphism Componente de botones de tablero complejos análogos con diseño receptivo y soporte de tema oscuro.