Retro_Rainbow_Buttons_Component
사진 갤러리 및 포트폴리오를 위해 설계된 레트로 테마의 그라디언트 무지개 버튼 컬렉션으로, 적당한 복잡성과 완전한 반응성 및 다크 모드를 지원합니다.
HTML 코드
<div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-300 dark:to-red-300 drop-shadow-lg">
Capture the Moment
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8 justify-items-center">
<!-- Button 1: Classic Retro -->
<button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg
bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600
text-white font-bold uppercase tracking-wider text-lg
transition-all duration-300
transform hover:-translate-y-1 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-500/50">
<span class="absolute inset-0 border-4 border-white dark:border-gray-900 rounded-lg group-hover:rotate-6 group-hover:scale-110 transition-transform duration-300"></span>
<span class="relative z-10">View Gallery</span>
</button>
<!-- Button 2: Striped Retro -->
<button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg
bg-gradient-to-b from-blue-500 via-purple-600 to-pink-500
text-white font-bold uppercase tracking-wider text-base
transition-all duration-300
transform hover:-skew-x-6 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-500/50">
<span class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/30 to-transparent
w-full h-full rotate-45 transform -translate-x-full
group-hover:translate-x-full transition-transform duration-700"></span>
<span class="relative z-10">Portfolio</span>
</button>
<!-- Button 3: Gradient Border -->
<button class="relative group px-7 py-3 rounded-lg
bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200
font-bold uppercase tracking-wide text-lg
transition-all duration-300
transform hover:scale-105 hover:shadow-xl
focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500/50">
<div class="absolute inset-0.5 rounded-md bg-white dark:bg-gray-800"></div>
<div class="absolute inset-0.5 rounded-md bg-gradient-to-br from-green-400 via-blue-500 to-purple-600
animate-pulse group-hover:animate-none
opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="relative z-10">My Work</span>
</button>
<!-- Button 4: Neon Glow Effect -->
<button class="relative group px-8 py-3 rounded-lg shadow-lg
bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500
text-white font-bold uppercase tracking-wider text-base
transition-all duration-300
transform hover:translate-y-px hover:shadow-2xl
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500/50">
<span class="absolute inset-0.5 rounded-lg
bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500
filter blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10
drop-shadow-[0_0_5px_rgba(255,255,255,0.7)] group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,1)] transition-all duration-300">About Me</span>
</button>
<!-- Button 5: Square Pixelated -->
<button class="relative group overflow-hidden px-8 py-3
bg-gradient-to-br from-teal-400 via-lime-500 to-yellow-500
text-white font-bold uppercase tracking-wider text-lg
shadow-lg transform transition-all duration-300
hover:-translate-x-1 hover:-translate-y-1
active:translate-x-0 active:translate-y-0
focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500/50"
style="clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);">
<span class="absolute inset-0 bg-black/10 dark:bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></span>
<span class="relative z-10 drop-shadow-md">Contact</span>
</button>
<!-- Button 6: Multi-layered 3D -->
<button class="relative group px-8 py-3
bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500
text-white font-bold uppercase tracking-wider text-base
shadow-[5px_5px_0_0_rgba(0,0,0,0.2)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,0.1)]
transition-all duration-300 transform
hover:-translate-x-1 hover:-translate-y-1
hover:shadow-[7px_7px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[7px_7px_0_0_rgba(255,255,255,0.15)]
focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-500/50">
<span class="relative z-10">Services</span>
<span class="absolute inset-0 border-2 border-white dark:border-gray-900 -translate-x-1 -translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></span>
</button>
</div>
<div class="mt-16 text-center text-gray-600 dark:text-gray-400 text-sm md:text-base">
<p>Explore my photography journey, one click at a time.</p>
<p class="mt-2">© <span id="current-year"></span> Your Photography Name. All rights reserved.</p>
</div>
</div>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>