3D_Business_Buttons_Component
A responsive set of 3D-styled business buttons with a warm sunset color scheme, suitable for corporate websites. Includes dark mode support and interactive hover effects.
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>Related Components
Buttons Component
A minimalist buttons component designed for a portfolio showcasing work or products, featuring vibrant colors and responsive design with dark theme support using Tailwind CSS.
Buttons Component
A minimalist/flat design Buttons Component with a grayscale color scheme. It is suitable for business/corporate websites and has moderate complexity with some interactive features. It is responsive and supports dark theme using Tailwind CSS.
Buttons Component
A Buttons component designed with 3D elements and vibrant colors for social media interfaces, supporting dark theme and responsive design.