Componente pulsanti Brutalismo
Un componente pulsanti dal design brutalista, caratterizzato da colori ad alta saturazione, layout reattivo e supporto per la modalità scura, adatto per siti Web aziendali e aziendali.
Codice 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>Componenti correlati
Componente pulsanti neumorfici
Un componente pulsante caratterizzato da uno stile di design neumorfico con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente dei pulsanti immobiliari Art Deco
Un complesso componente pulsante ispirato all'Art Déco per piattaforme immobiliari, caratterizzato da motivi geometrici, lussuoso stile in scala di grigi e molteplici elementi interattivi, con piena reattività e supporto per la modalità oscura.
Gradient_Weather_Buttons
Una serie di pulsanti reattivi per le previsioni del tempo e i dati climatici, con una sfumatura viola/viola con transizioni fluide al passaggio del mouse e supporto per la modalità scura.