Composant Boutons
Un composant de boutons minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="flex flex-wrap space-x-4 justify-center p-6">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Primary Button
</button>
<button class="bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Secondary Button
</button>
<button class="bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Success Button
</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Danger Button
</button>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #2563eb; }
.bg-gray-300 { background-color: #4b5563; }
.bg-green-500 { background-color: #22c55e; }
.bg-red-500 { background-color: #ef4444; }
.text-white { color: #ffffff; }
.text-gray-800 { color: #f9fafb; }
.shadow-md { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
}
</style>Composants associés
Composant Boutons de conception matérielle
Composant de boutons de conception matérielle dans les tons de terre pour les médias sociaux
Composant Boutons
Composant de boutons réactifs avec conception matérielle, schéma de couleurs triadique et prise en charge du thème sombre.
Composant Boutons
Une collection de boutons minimalistes et au design plat pour diverses actions, en utilisant une palette de couleurs complémentaires. Entièrement réactif avec prise en charge du mode sombre.