トップに戻るボタン

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

プレビュー

HTMLコード

<div class="fixed bottom-10 right-10">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-30 backdrop-blur-md shadow-lg hover:bg-opacity-50 transition duration-300 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-70">
        <img src="https://picsum.photos/32" alt="Back to Top" class="w-8 h-8" />
    </a>
</div>

関連コンポーネント

トップに戻るボタン

ニューモーフィックデザイン、モノクロカラースキーム、ダークモードをサポートするトップに戻るボタン。Tailwind CSSを使用します。

開ける

トップに戻るボタンコンポーネント - Brutalism Earth Tones

ブルータリズムスタイルでデザインされた複雑な「Back to Top」ボタンコンポーネントで、素朴な配色で、ブログ/コンテンツサイトに適しています。レスポンシブで、ダークモードのサポートが含まれています。

開ける

トップに戻るボタン

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

開ける