Composant Boutons
Skeuomorphism Analogue Complex Dashboard Buttons Composant avec design réactif et prise en charge du thème sombre.
HTML Code
<div class="flex flex-wrap justify-center items-center p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-xl">
<!-- Primary Button -->
<button class="m-4 px-8 py-4 bg-gradient-to-br from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
Dashboard
</button>
<!-- Secondary Button -->
<button class="m-4 px-8 py-4 bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
Reports
</button>
<!-- Tertiary Button -->
<button class="m-4 px-8 py-4 bg-gradient-to-br from-yellow-500 to-yellow-700 hover:from-yellow-600 hover:to-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
Analytics
</button>
<!-- Disabled Button -->
<button class="m-4 px-8 py-4 bg-gray-400 dark:bg-gray-600 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-gray-200 dark:text-gray-400 text-lg font-bold cursor-not-allowed">
Settings
</button>
<!-- Icon Button -->
<button class="m-4 p-4 bg-gradient-to-br from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 rounded-full shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white transform transition-transform duration-200 hover:scale-105">
<svg class="w-6 h-6" 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>
</div>Composants associés
Composant Boutons
Un composant de bouton à thème rétro-vintage avec une palette de couleurs triadiques, une complexité simple et un design réactif avec prise en charge du mode sombre, adapté à un blog ou à un site Web de contenu.
Composant Boutons de neumorphisme
Un composant de bouton complexe de style Neumorphism avec des couleurs vives, un design réactif et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.
Boutons de médias sociaux Neumorphism
Un composant de bouton simple de style Neumorphism pour les interfaces de médias sociaux, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Le bouton utilise une palette de couleurs analogue et des ombres subtiles pour créer un aspect doux et extrudé.