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

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

シンプルで芸術的な「Back to Top」ボタンは、食品/レストランのウェブサイト向けに設計されており、水彩画にインスパイアされたグレースケールの美学が特徴です。レスポンシブで、ダークモードをサポートしています。

プレビュー

HTMLコード 

<a href="#" aria-label="Back to top" class="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-50 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 dark:focus:ring-gray-100">
  <div class="relative w-14 h-14 md:w-16 md:h-16 rounded-full overflow-hidden shadow-lg transform transition-all duration-300 group-hover:scale-110 group-active:scale-95 border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
    <!-- Artistic background layer -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      <!-- Example of a subtle watercolor texture effect (can be replaced with actual SVG or background image for more detail) -->
      <svg class="absolute inset-0 w-full h-full opacity-30 group-hover:opacity-50 transition-opacity duration-300" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <filter id="watercolorFilter" x="-50%" y="-50%" width="200%" height="200%">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
            <feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light" />
            <feBlend in="SourceGraphic" in2="light" mode="overlay" />
          </filter>
        </defs>
        <rect width="100" height="100" fill="#fff" filter="url(#watercolorFilter)" class="dark:fill-gray-900"/>
      </svg>
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-8 h-8 md:w-9 md:h-9 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 group-hover:-translate-y-1 group-active:translate-y-0" 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>
    </div>
  </div>
</a>

関連コンポーネント

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

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

開ける

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

ビジネス/企業のWebサイト用に温かみのあるニュートラルでデザインされたスキューモーフィックな「Back to Top」ボタンは、レスポンシブデザインとダークモードのサポートを備えています。ボタンには3D押された効果があります。

開ける

Retro_Back_To_Top_Button

レトロ/ビンテージ - 類似の配色でブログ/コンテンツを消費するためのノスタルジックなトップに戻るボタンコンポーネント。レスポンシブモードとダークモードをサポートする複雑なデザイン。

開ける