CCHub Logo CCHub Tailwind Collection
コンポーネント トップに戻るボタン Brutalism_Earth_Tone_Back_To_Top_Button

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>

関連コンポーネント

ブルータリズム トップに戻る

グレースケールの色と Tailwind CSS を使用したブルータリズムの Back to Top ボタン コンポーネント。応答性が高く、ダークモードをサポートしています。

開ける

トップに戻るボタンコンポーネント

Tailwind CSS を使用したブルータリズム スタイルの Back to Top Button コンポーネント。このコンポーネントは、大胆でコントラストの高いデザインで、レスポンシブ効果とダークテーマをサポートしています。

開ける

ブルータリズム トップに戻るボタン

トップに戻る ブルータリズムスタイル、トライアドカラースキーム、複雑な複雑さを備えたボタンコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

開ける