Componente Pulsanti
Un componente pulsanti dal design minimalista/piatto con una combinazione di colori in scala di grigi. È adatto per siti Web aziendali/aziendali e ha una complessità moderata con alcune funzionalità interattive. È reattivo e supporta il tema scuro utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-wrap justify-center gap-4 p-4">
<!-- Primary Button -->
<button class="px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
Primary Button
</button>
<!-- Secondary Button -->
<button class="px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
Secondary Button
</button>
<!-- Tertiary Button -->
<button class="px-6 py-3 font-semibold text-gray-600 bg-transparent rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
Tertiary Button
</button>
<!-- Disabled Button -->
<button class="px-6 py-3 font-semibold text-gray-400 bg-gray-200 rounded-md cursor-not-allowed
dark:bg-gray-700 dark:text-gray-600" disabled>
Disabled Button
</button>
<!-- Button with Icon -->
<button class="flex items-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
Button with Icon
</button>
<!-- Outline Button with Icon -->
<button class="flex items-center px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
Outline Button with Icon
</button>
</div>Componenti correlati
Componente Pulsanti
Un componente pulsante a tema retrò-vintage con combinazione di colori triadica, complessità semplice e design reattivo con supporto per la modalità oscura, adatto per un blog o un sito Web di contenuti.
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.
Componente Pulsanti
Pulsanti in stile Material Design con una combinazione di colori in scala di grigi per scopi di portfolio, con design reattivo con supporto per temi scuri.