トップに戻るボタン - ブルータリズム
ポートフォリオ用のブルータリズムの「Back to Top」ボタンコンポーネントで、トライアドの配色とシンプルなデザインが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。
HTMLコード
<a href="#" class="fixed bottom-4 right-4 bg-red-500 text-yellow-300 border-4 border-black dark:bg-red-700 dark:text-yellow-100 dark:border-white transition-all duration-300 hover:bg-red-600 hover:text-yellow-400 dark:hover:bg-red-800 dark:hover:text-yellow-200 p-4 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] z-50">
<span class="font-extrabold text-xl uppercase">↑<br/>Top</span>
</a>関連コンポーネント
アールデコ調のトップに戻るボタン
アールデコ調のデザインの「Back to Top」ボタンコンポーネントは、幾何学模様と温かみのある夕焼けの色が特徴で、デート/ソーシャルプラットフォームに適しています。リッチでインタラクティブなスタイルが含まれており、ダークモードをサポートしています。
トップに戻るボタン - マテリアルデザインパステル
パステルカラーの配色でマテリアルデザインの原則に従い、ポートフォリオWebサイト用に調整されたレスポンシブな「Back to Top」ボタンコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。
トップに戻るボタンコンポーネント
eコマースサイト向けのレスポンシブな「Back to Top」ボタンコンポーネントで、明るいアクセントカラーの黒と白のモノクロデザインと、ホバー時の魅力的なマイクロインタラクションが特徴です。ダークモードのサポートが含まれています。