3D_Business_Buttons_Component
Un conjunto receptivo de botones comerciales de estilo 3D con un esquema de color cálido al atardecer, adecuado para sitios web corporativos. Incluye soporte para el modo oscuro y efectos interactivos de desplazamiento.
Código HTML
<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>Componentes relacionados
Botones interactivos de la galería de fotos
Un conjunto de botones interactivos y responsivos diseñados para galerías de fotos y portafolios de fotógrafos, con una paleta de colores bosque/verde y sutiles efectos de microinteracción para la participación del usuario. Incluye soporte para modo oscuro.
Componente Botones
Un componente de botones minimalista diseñado para un portafolio que muestra trabajos o productos, con colores vibrantes y un diseño receptivo con soporte para temas oscuros mediante Tailwind CSS.
Componente Botones de morfismo de vidrio
Botones de morfismo de vidrio que usan tonos tierra para un sitio de portafolio receptivo con modo oscuro