トップに戻るボタン - 3Dデザイン

3D デザイン、レスポンシブ効果、Tailwind CSS を使用したダークテーマのサポートを備えたトップに戻るボタン。JavaScriptは含まれていません。

プレビュー

HTMLコード

<div class="fixed bottom-4 right-4 group">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg 
                 transform transition-transform duration-300 
                 group-hover:scale-110 group-active:scale-90 
                 dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>

関連コンポーネント

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

ダッシュボード用のミニマリストでフラットなBack to Top Button Componentは、単色の配色が特徴です。インタラクティブ機能、レスポンシブデザイン、ダークテーマのサポートなど、適度に複雑で、HTMLとTailwind CSSだけで構築されています。

開ける

トップに戻るボタン

Tailwind CSSを使用した、3Dデザイン、鮮やかな配色、ソーシャルメディアインターフェイス用の複雑なインタラクティブ要素を備えたトップに戻るボタンコンポーネント。レスポンシブデザインとダークテーマのサポートが含まれています。

開ける

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

ポートフォリオ用のブルータリズムの「Back to Top」ボタンコンポーネントで、トライアドの配色とシンプルなデザインが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

開ける