3D_Business_Buttons_Component
기업 웹 사이트에 적합한 따뜻한 일몰 색 구성표가 있는 반응형 3D 스타일 비즈니스 버튼 세트입니다. 다크 모드 지원 및 대화형 호버 효과가 포함됩니다.
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>관련 구성 요소
Buttons 구성 요소
CRM/비즈니스 도구 애플리케이션을 위한 대화형 버튼 세트로, 마이크로 인터랙션, 보석 톤 색상 및 다크 모드 지원을 통한 완전한 응답성을 제공합니다.
유쾌한 엔터테인먼트 버튼
엔터테인먼트 또는 미디어 플랫폼을 위해 디자인된 재미있고 재미있는 버튼 세트로, 차분하거나 채도가 낮은 색상과 둥근 요소를 특징으로 합니다. 반응형이며 다크 모드 지원이 포함됩니다.