Composant Boutons
Un ensemble de boutons interactifs pour une application CRM/Business Tools, avec des micro-interactions, des couleurs de bijou et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-xl p-6 sm:p-8 space-y-8 border border-purple-200 dark:border-purple-900">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-400 mb-8">
CRM Action Buttons
</h2>
<!-- Primary Action Buttons -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800
text-white text-lg font-semibold shadow-lg
transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:active:bg-emerald-900">
<span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3" 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span>New Contact</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-sapphire-600 hover:bg-sapphire-700 active:bg-sapphire-800
text-white text-lg font-semibold shadow-lg
transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
dark:bg-sapphire-700 dark:hover:bg-sapphire-800 dark:active:bg-sapphire-900">
<span class="absolute inset-0 bg-sapphire-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
<span>View Pipeline</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-ruby-600 hover:bg-ruby-700 active:bg-ruby-800
text-white text-lg font-semibold shadow-lg
transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
dark:bg-ruby-700 dark:hover:bg-ruby-800 dark:active:bg-ruby-900">
<span class="absolute inset-0 bg-ruby-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span>Schedule Demo</span>
</button>
</div>
<!-- Secondary Action Buttons -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-4">
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700
text-white text-lg font-semibold shadow-md
transition-all duration-300 ease-out transform hover:-translate-y-1
dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:active:bg-indigo-800">
<span class="absolute inset-0 bg-indigo-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span>Send Email</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-purple-500 hover:bg-purple-600 active:bg-purple-700
text-white text-lg font-semibold shadow-md
transition-all duration-300 ease-out transform hover:-translate-y-1
dark:bg-purple-600 dark:hover:bg-purple-700 dark:active:bg-purple-800">
<span class="absolute inset-0 bg-purple-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.59 1.34L15.38 5.76a1 1 0 011.02-.303L21 4V3a1 1 0 00-1-1H4a1 1 0 00-1 1v2zm0 14a2 2 0 002 2h14a2 2 0 002-2v-3l-2.03-2.03a1 1 0 00-.98-.21L15 14l-2.5-1.5-2.59 1.34L9 17l-1.34 2.68L5 20a1 1 0 01-1-1v-2l-1 .5V19z"></path></svg>
<span>Log Activity</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-teal-500 hover:bg-teal-600 active:bg-teal-700
text-white text-lg font-semibold shadow-md
transition-all duration-300 ease-out transform hover:-translate-y-1
dark:bg-teal-600 dark:hover:bg-teal-700 dark:active:bg-teal-800">
<span class="absolute inset-0 bg-teal-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span>Add Note</span>
</button>
</div>
<!-- Utility Buttons with subtle hover effects -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-6">
<button class="relative group flex items-center justify-center px-4 py-2 rounded-lg overflow-hidden
bg-gray-100 hover:bg-gray-200 active:bg-gray-300
text-gray-700 text-base font-medium shadow-sm
transition-all duration-200 ease-in-out transform hover:scale-105
dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200">
<span class="absolute inset-0 bg-gray-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
<svg class="w-4 h-4 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="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0014.586 3H7a2 2 0 00-2 2v11m0 0l-1 1h4m-4-4v4Composants associés
Composant Boutons
Un composant de bouton minimaliste pour les tableaux de bord, avec prise en charge du responsive design et du thème sombre.
Composant Boutons
Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.
Gradient_Weather_Buttons
Un ensemble de boutons réactifs pour les prévisions météorologiques et les données climatiques, avec un dégradé violet/violet avec des transitions de survol fluides et la prise en charge du mode sombre.