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
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é.
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.
Composant Boutons
Skeuomorphism Analogue Complex Dashboard Buttons Composant avec design réactif et prise en charge du thème sombre.