検索コンポーネント

カテゴリ

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

トップに戻るボタン

ページをスクロールして一番上に戻るボタン

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

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

                <div class="fixed bottom-4 right-4">
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m0 0l-4-4m4 4l4-4" />
        </svg>
    </button>
</div>

トップに戻るボタン

ミニマリストのフラットデザイン eコマースWebサイト用のトップに戻るボタンコンポーネントで、グレースケールの配色とダークテーマをサポートするレスポンシブデザインを利用しています。

開けるプレビュー

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

トップに戻るボタン

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

開けるプレビュー

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-blue-500 text-white p-3 rounded-full shadow-md transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-blue-700 dark:text-gray-200">
    <svg class="w-6 h-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>
  </a>
</div>

<style>
  /* This simple example uses CSS for smooth scrolling. For a production site, you might use a small amount of JavaScript for better compatibility and control over the scroll behavior and when the button appears. */
  html {
    scroll-behavior: smooth;
  }

  /* Basic example to show/hide the button based on scroll position. 
     A robust solution would involve JavaScript Intersection Observer or scroll events. */
  body:before {
    content: "";
    height: 200vh; /* Simulate a long page */
    display: block;
  }

  .group-hover\:opacity-100:hover + .fixed a {
      opacity: 1; /* This part is flawed for demonstrating scroll-based visibility without JS */
  }

  /* A better approach for scroll-based visibility would require JavaScript */
  .fixed a {
      /* Initially hidden, JS would make it visible on scroll */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
  }


</style>

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

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

開けるプレビュー

                <a href="#" class="fixed bottom-6 right-6 bg-blue-500 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300 dark:bg-blue-700 dark:hover:bg-blue-900">
  <svg class="w-6 h-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>
</a>

トップに戻るボタン

ダッシュボードのインターフェースに収まるミニマリストでフラットなデザインのBack to Topボタン。ボタンは単色の配色でスタイル設定され、操作性を向上させるためのホバー効果とフォーカス効果が含まれています。また、応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <div class="fixed bottom-8 right-8">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

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

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

開けるプレビュー

                <div class="fixed bottom-5 right-5 z-50">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
        ⬆️
    </a>
</div>

<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
        <p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 dark:bg-cyan-500 text-yellow-300 dark:text-magenta-500 p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-cyan-500 border-4 border-black dark:border-white z-50">
    <svg class="w-6 h-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>
</a>

トップに戻るボタン - マテリアルデザインパステル

パステルカラーの配色でマテリアルデザインの原則に従い、ポートフォリオWebサイト用に調整されたレスポンシブな「Back to Top」ボタンコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。

開けるプレビュー

                <button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
</button>

トップに戻るボタン

glassmorphism効果で設計されたレスポンシブなBack to Topボタンコンポーネントで、プロフェッショナルなビジネスWebサイトに適しています。最小限の要素を備えたシンプルなレイアウトが特徴で、明るいテーマと暗いテーマの両方でうまく機能します。

開けるプレビュー

                <div class="fixed bottom-5 right-5">
    <a href="#" class="bg-white bg-opacity-30 backdrop-blur-md border border-gray-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-full p-3 shadow-lg hover:shadow-2xl transition-transform transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

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

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

開けるプレビュー

                <button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>