CCHub Logo CCHub Tailwind Collection
コンポーネント トップに戻るボタン ニューモーフィック Back to Top ボタン

ニューモーフィック Back to Top ボタン

eコマース用のニューモーフィックな「Back to Top」ボタンで、繊細な影を使用して背景に溶け込む繊細で柔らかいUIデザインを提供します。調和のとれた外観、シンプルなレイアウト、ダークテーマをサポートするレスポンシブデザインを実現する類似の色が特徴で、オンラインショッピング体験に最適です。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
    aria-label="Back to top">
    <svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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>
  </a>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
  }
</style>

関連コンポーネント

トップに戻るボタン

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

開ける

トップに戻るボタン

マテリアル デザイン [トップに戻る] ボタンは、ユーザーがページを下にスクロールしたときに表示されます。ダークモードのサポートとスムーズなスクロールが含まれています。

開ける

トップに戻るボタン

ダークモードをサポートする、最小限で応答性の高い「Back to Top」ボタンコンポーネント。下にスクロールした後に表示され、スムーズスクロールを使用して、クリックするとユーザーをページの上部に戻します。スクロールにはJavaScriptは使用せず、CSSのみを使用します。

開ける