3D_Business_Buttons_Component
Un ensemble réactif de boutons d’entreprise de style 3D avec une palette de couleurs chaudes de coucher de soleil, adapté aux sites Web d’entreprise. Comprend la prise en charge du mode sombre et des effets de survol interactifs.
HTML Code
<div class="p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-800 dark:from-orange-400 dark:to-red-600 drop-shadow-md">
Elevate Your Business
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Button 1: Learn More -->
<a href="#" class="group block w-full">
<div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
bg-gradient-to-br from-orange-400 to-red-600 dark:from-orange-600 dark:to-red-800
transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
<div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
<div class="relative z-10 px-8 py-10 text-center rounded-xl bg-orange-50 dark:bg-gray-800
transform translate-z-10 group-hover:bg-orange-100 dark:group-hover:bg-gray-900
transition-all duration-300 overflow-hidden
after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
after:from-orange-200 after:to-red-300 after:dark:from-gray-700 after:dark:to-gray-900
after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
after:transition-all after:duration-300 after:mix-blend-overlay">
<p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
<span class="block transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">💡</span>
</p>
<h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
Learn More
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Dive deep into our offerings and discover how we can help your business thrive.
</p>
<span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
transform group-hover:scale-105 group-active:scale-95
shadow-[0_4px_15px_rgba(234,88,12,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
Explore Now
</span>
</div>
</div>
</a>
<!-- Button 2: Get Started -->
<a href="#" class="group block w-full">
<div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
bg-gradient-to-br from-yellow-400 to-orange-600 dark:from-yellow-600 dark:to-orange-800
transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
<div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
<div class="relative z-10 px-8 py-10 text-center rounded-xl bg-yellow-50 dark:bg-gray-800
transform translate-z-10 group-hover:bg-yellow-100 dark:group-hover:bg-gray-900
transition-all duration-300 overflow-hidden
after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
after:from-yellow-200 after:to-orange-300 after:dark:from-gray-700 after:dark:to-gray-900
after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
after:transition-all after:duration-300 after:mix-blend-overlay">
<p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
<span class="block transform group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">🚀</span>
</p>
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-400 mb-2 group-hover:text-red-700 dark:group-hover:text-red-300 transition-colors duration-300">
Get Started
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Begin your journey with us today. It's quick, easy, and rewarding.
</p>
<span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
transform group-hover:scale-105 group-active:scale-95
shadow-[0_4px_15px_rgba(245,158,11,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
Sign Up Now
</span>
</div>
</div>
</a>
<!-- Button 3: Contact Us -->
<a href="#" class="group block w-full">
<div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
bg-gradient-to-br from-red-400 to-yellow-600 dark:from-red-600 dark:to-yellow-800
transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
<div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
<div class="relative z-10 px-8 py-10 text-center rounded-xl bg-red-50 dark:bg-gray-800
transform translate-z-10 group-hover:bg-red-100 dark:group-hover:bg-gray-900
transition-all duration-300 overflow-hidden
after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
after:from-red-200 after:to-yellow-300 after:dark:from-gray-700 after:dark:to-gray-900
after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
after:transition-all after:duration-300 after:mix-blend-overlay">
<p class="text-5xl mb-4 text-red-600 dark:text-red-400 group-hover:text-orange-700 dark:group-hover:text-orange-500 transition-colors duration-300">
<span class="block transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">📞</span>
</p>
<h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
Contact Us
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Have questions? Reach out to our team. We're here to help you.
</p>
<span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
transform group-hover:scale-105 group-active:scale-95
shadow-[0_4px_15px_rgba(239,68,68,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
Get in Touch
</span>
</div>
</div>
</a>
</div>
</div>
</div>Composants associés
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
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.
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.