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 semplice componente di pulsanti in stile Material Design, che utilizza una combinazione di colori monocromatica e supporta la modalità scura, adatto per siti Web aziendali/aziendali.
Componente Pulsanti
Un componente pulsanti in stile retrò/vintage che presenta effetti reattivi e supporto per temi scuri, progettato per evocare la nostalgia dell'estetica degli anni '80 e '90.
ArtDecoECommerceButtons
Un complesso set di pulsanti per l'e-commerce ispirati all'Art Déco con motivi geometrici e lussuosi toni Ocean/Blue, ottimizzati per la reattività e la modalità scura.