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 Buttons progettato con elementi 3D e colori vivaci per le interfacce dei social media, che supporta il tema scuro e il design reattivo.
Pulsanti di intrattenimento giocosi
Una serie di pulsanti giocosi e divertenti progettati per una piattaforma di intrattenimento o multimediale, con colori tenui/desaturati ed elementi arrotondati. Reattivo e include il supporto per la modalità oscura.
3D_Healthcare_Buttons_Component
Un complesso componente di pulsanti ispirato al 3D per applicazioni sanitarie, caratterizzato da un design monocromatico in bianco e nero con un colore d'accento brillante, un layout reattivo e il supporto della modalità scura.