トップに戻るボタン
Tailwind CSSを使用した、3Dデザイン、鮮やかな配色、ソーシャルメディアインターフェイス用の複雑なインタラクティブ要素を備えたトップに戻るボタンコンポーネント。レスポンシブデザインとダークテーマのサポートが含まれています。
HTMLコード
<div class="fixed bottom-5 right-5 z-50">
<button
class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
aria-label="Back to top"
>
<svg
class="w-6 h-6"
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>
</button>
</div>
<style>
.back-to-top-btn {
/* Adding basic 3D effect with box-shadow */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
0 6px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
}
.back-to-top-btn:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
}
.back-to-top-btn:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
</style>