Brutalism_Earth_Tone_Back_To_Top_Button
브루탈리즘에서 영감을 받은 'Back to Top' 버튼은 블로그/콘텐츠 사이트를 위해 설계된 흙색입니다. 적당히 복잡하고 반응이 빠르며 다크 모드를 지원합니다. 버튼은 고대비 디자인과 약간 조잡한 미학이 특징입니다.
HTML 코드
<div class="fixed bottom-4 right-4 z-50 group" x-data="{ showButton: false }" @scroll.window="showButton = (window.pageYOffset > 300) ? true : false" x-show="showButton" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90 -translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-cloak>
<button
@click="window.scrollTo({top: 0, behavior: 'smooth'})"
class="p-4 bg-lime-700 dark:bg-lime-900 border-2 border-stone-900 dark:border-stone-100
text-stone-100 dark:text-stone-100 text-xl font-bold uppercase
shadow-[4px_4px_0_0_rgba(28,25,23,1)] dark:shadow-[4px_4px_0_0_rgba(250,250,250,1)]
hover:bg-lime-800 dark:hover:bg-lime-950
active:shadow-[0px_0px_0_0_rgba(28,25,23,1)] active:translate-x-[4px] active:translate-y-[4px]
focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-300/50
transition-all duration-150 ease-in-out
flex items-center justify-center space-x-2 w-16 h-16 sm:w-20 sm:h-20"
aria-label="Back to top"
>
<svg class="w-8 h-8 sm:w-10 sm:h-10 transform -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="square" stroke-linejoin="square" stroke-width="3" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<div class="absolute -top-1 -left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
<div class="absolute top-1 left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
</div>