トップに戻るボタンコンポーネント
Tailwind CSS を使用したブルータリズム スタイルの Back to Top Button コンポーネント。このコンポーネントは、大胆でコントラストの高いデザインで、レスポンシブ効果とダークテーマをサポートしています。
HTMLコード
<div class="fixed bottom-5 right-5">
<a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
<span class="text-xl">⬆️</span>
</a>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* General styles */
body {
font-family: 'Courier New', Courier, monospace;
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
</style>関連コンポーネント
Brutalism_Earth_Tone_Back_To_Top_Button
ブルータリズムにインスパイアされたアースカラーの「Back to Top」ボタンで、ブログ/コンテンツサイト向けに設計されています。適度に複雑で、応答性が高く、ダークモードをサポートしています。ボタンはハイコントラストなデザインと少し粗野な美学が特徴です。
トップに戻るボタン ミニマリスト バイブラント
ポートフォリオWebサイトに適した、鮮やかな色のミニマルでフラットなBack to Topボタンコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。