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
Boutons de style Material Design avec une palette de couleurs en niveaux de gris à des fins de portfolio, avec un design réactif avec prise en charge du thème sombre.
Composant Boutons
Un composant Buttons conçu avec des éléments 3D et des couleurs vives pour les interfaces de médias sociaux, prenant en charge le thème sombre et le responsive design.
Composant Glassmorphism Buttons
Boutons Glassmorphism utilisant des tons de terre pour un site Portfolio réactif avec mode sombre