Componente Pulsanti

Componente pulsanti reattivi con Material Design, combinazione di colori triadica e supporto per temi scuri.

Anteprima

Codice HTML

<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</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.

Aperto

Componente Pulsanti

Componente pulsanti di neumorfismo con combinazione di colori monocromatica per scopi di portfolio, reattivo con supporto per temi scuri.

Aperto

Componente Pulsanti

Un componente di pulsanti in stile 3D adatto a un portfolio con una combinazione di colori analoga e supporto per la modalità scura.

Aperto