레트로 게임 반응 버튼
게임 웹사이트를 위한 복잡한 복고풍 테마의 반응 버튼 구성 요소로, '좋아요' 및 개수가 있는 기타 반응 유형을 특징으로 하며, 가을 색상과 다크 모드 지원을 포함한 완전한 반응성으로 설계되었습니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-amber-200 to-amber-500 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-['Press_Start_2P',_cursive] tracking-wide">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-red-800 to-red-900 border-4 border-solid border-red-950 dark:from-gray-700 dark:to-gray-900 dark:border-gray-950 rounded-lg p-3 sm:p-4 md:p-6 shadow-2xl transform rotate-0 hover:rotate-1 transition-all duration-300 ease-in-out relative overflow-hidden">
<!-- Scanline Overlay for Retro Effect -->
<div class="absolute inset-0 z-10 pointer-events-none opacity-20 dark:opacity-10">
<div class="w-full h-full bg-repeat-y bg-[length:100%_4px] bg-[url('data:image/svg+xml;base264,PHN2ZyB2aWQ9J0xheWVyXzEnIGRhdGEtbmFtZT0nTGF5ZXIgMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PScwIDAgNCA0Jz48ZGVmcz48c3R5bGU+LmNscy0xLHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkY7c3Ryb2tlLXdpZHRoOjEuNjFweDtvcGFjaXR5OjAuNTA7fS5jbHMtMntmaWxsOiNGRkY7fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMC42NyIgYz0iMC42NyIgd2lkdGhcdX0iMy44OCIgaGVpZ2h0PSIyLjY2Ii8-PHJlY3QgY2xhc3M9ImNscy0yIiB5PSIyLjI4IiB3aWR0aD0iNC4xIiBoZWlnaHQ9IjEuMDUiLz48L3N2Zz4=')] bg-white"></div>
</div>
<div class="relative z-20">
<div class="text-center mb-4 md:mb-6">
<h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl text-amber-300 dark:text-orange-400 mb-2 drop-shadow-[0_0_8px_rgba(255,200,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(255,165,0,0.8)]">GAME OVER? NAY!</h2>
<p class="text-sm sm:text-base text-amber-100 dark:text-gray-300">Rate this 'EPIC' moment!</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4 lg:gap-5">
<!-- Like Button -->
<button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
<span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-bounce-y drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">👍</span>
<span class="block">Like</span>
<span class="text-xs sm:text-sm mt-1 text-amber-50">1.2K</span>
</button>
<!-- Epic Button -->
<button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
<span class="block text-3xl sm:text-4xl mb-1 group-hover:rotate-12 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🔥</span>
<span class="block">Epic</span>
<span class="text-xs sm:text-sm mt-1 text-amber-50">789</span>
</button>
<!-- LOL Button -->
<button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
<span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-spin-slow drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😂</span>
<span class="block">LOL</span>
<span class="text-xs sm:text-sm mt-1 text-amber-50">543</span>
</button>
<!-- Sad Button -->
<button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
<span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-shake drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😭</span>
<span class="block">oof</span>
<span class="text-xs sm:text-sm mt-1 text-amber-50">210</span>
</button>
<!-- Mind Blown Button -->
<button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
<span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-125 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🤯</span>
<span class="block">WTF!</span>
<span class="text-xs sm:text-sm mt-1 text-amber-50">99</span>
</button>
<!-- GG Button -->
<button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
<span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🏆</span>
<span class="block">GG</span>
<span class="text-xs sm:text-sm mt-1 text-amber-50">350</span>
</button>
</div>
<div class="mt-6 md:mt-8 p-3 bg-red-900 border-2 border-red-950 dark:bg-gray-800 dark:border-gray-900 rounded-md shadow-inner text-amber-100 dark:text-gray-300">
<p class="text-center text-sm md:text-base">Your reactions power up the leaderboard!</p>
</div>
</div>
</div>
<!-- Custom Animation Styles (would be in a <style> tag or CSS file) -->
<style>
@keyframes bounce-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-0.15em); }
}
.group-hover\:animate-bounce-y:hover {
animation: bounce-y 0.6s ease-in-out infinite;
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.group-hover\:animate-spin-slow:hover {
animation: spin-slow 2s linear infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); }
20%, 40%, 60%, 80% { transform: translateX(0.1em); }
}
.group-hover\:animate-shake:hover {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
/* To use 'Press Start 2P' font, link it from Google Fonts: */
/* @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */
/* Then apply: font-family: 'Press Start 2P', cursive; */
</style>
</div>관련 구성 요소
아날로그 다크 모드 좋아요/반응 버튼
복잡한 반응형 좋아요/반응 버튼 컴포넌트로, 다크 모드 UI와 유사한 색 구성표가 있는 포트폴리오로, 순수 HTML 및 Tailwind CSS를 사용하여 구현됩니다. Tailwind의 dark: 접두사를 통해 다크 모드를 지원합니다.
좋아요/반응 버튼
Like/Reaction Buttons Microinteractions, Complementary color scheme, Simple complexity, for social media 목적의 구성 요소.