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>