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

トップに戻るボタン

マイクロインタラクション、アースカラーの配色、ビジネス/企業Webサイト向けのシンプルなレイアウトを備えたBack to Topボタンコンポーネント。Tailwind CSSを使用したダークモードサポートのレスポンシブデザイン

プレビュー

HTMLコード 

<!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

関連コンポーネント

Glassmorphism Rainbow Back to Top 農業用ボタン

Glassmorphism デザインと虹色のグラデーションを備えた、農業/農業 Web サイト向けに調整された、複雑で応答性の高い 'Back to Top' ボタン コンポーネント。ぼかし効果とダークモードのサポートを備えています。

開ける

トップに戻るボタン

GlassmorphismデザインとeコマースWebサイト用の単色の配色を備えたシンプルなトップに戻るボタン。

開ける

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

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

開ける