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

トップに戻るボタン

画面の右下隅に固定されて表示されるシンプルでエレガントなバックツートップボタン。微妙なパステルカラーの配色とスムーズなホバー/フォーカスのマイクロインタラクションが特徴です。このボタンには、ダークモードのサポートが組み込まれたレスポンシブデザインが含まれています。ホバーすると、ボタンはゆっくりと拡大され、背景色が変わり、視覚的なフィードバックを提供します。このコンポーネントは Tailwind CSS クラスのみを使用し、JavaScript は必要ありません。

プレビュー

HTMLコード 

<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
  <span class="sr-only">Back to top</span>
</button>

関連コンポーネント

トップに戻るボタン ミニマリスト バイブラント

ポートフォリオWebサイトに適した、鮮やかな色のミニマルでフラットなBack to Topボタンコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。

開ける

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

マイクロインタラクションと鮮やかな色でデザインされたレスポンシブバック・トゥ・トップ・ボタンは、ダークモードをサポートするダッシュボードインターフェースに適しています。

開ける

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

Tailwind CSSを使用してブルータリズムスタイルでデザインされたシンプルなBack to Topボタンで、ポートフォリオWebサイトに適しています。グレースケールの配色とダークテーマのサポートが特徴です。

開ける