Componente Pulsanti
Un componente Pulsanti progettato in stile Material Design con una combinazione di colori pastello, reattivo per siti Web aziendali/aziendali e che supporta temi scuri.
Codice HTML
<div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
<!-- Primary Button -->
<button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Primary Button
</button>
<!-- Secondary Button -->
<button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
Secondary Button
</button>
<!-- Disabled Button -->
<button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
Disabled Button
</button>
<!-- Outline Button -->
<button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
Outline Button
</button>
<!-- Icon Button -->
<button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
Icon Button
</button>
</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.
Pulsanti interattivi della galleria fotografica
Una serie di pulsanti reattivi e interattivi progettati per gallerie fotografiche e portfolio di fotografi, con una tavolozza di colori foresta/verde e sottili effetti di micro-interazione per il coinvolgimento dell'utente. Include il supporto per la modalità scura.