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
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é.
Composant Boutons
Un composant de boutons conçu dans le style Material Design avec une palette de couleurs pastel, réactif pour les sites Web d’entreprise/d’entreprise et prenant en charge les thèmes sombres.
Composant Boutons
Un ensemble de boutons interactifs conçus pour un portfolio, avec des micro-interactions, une palette de couleurs complémentaires et une réactivité totale avec prise en charge du mode sombre.