Componente de botones de brutalismo
Un componente de botones con un diseño brutalista, con colores de alta saturación, diseño receptivo y soporte de modo oscuro, adecuado para sitios web comerciales y corporativos.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
<h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
<div class="flex space-x-4">
<button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
Primary Action
</button>
<button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
Secondary Action
</button>
</div>
<div class="flex space-x-4 mt-6">
<button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
Tertiary Action
</button>
<button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
Another Action
</button>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
<div class="flex items-center justify-center mt-2">
<img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
<p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
</div>
</div>
</div>Componentes relacionados
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.
Componente Botones
Un conjunto de botones interactivos para una aplicación CRM/Business Tools, con microinteracciones, colores de tono joya y capacidad de respuesta completa con soporte para modo oscuro.
Skeuomorphic_Social_Buttons
Un complejo conjunto de botones skeuomórficos con una combinación de colores vibrantes, diseñados para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro, imitando botones del mundo real.