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>関連コンポーネント
Glassmorphism Rainbow Back to Top 農業用ボタン
Glassmorphism デザインと虹色のグラデーションを備えた、農業/農業 Web サイト向けに調整された、複雑で応答性の高い 'Back to Top' ボタン コンポーネント。ぼかし効果とダークモードのサポートを備えています。
トップに戻るボタン
glassmorphism効果で設計されたレスポンシブなBack to Topボタンコンポーネントで、プロフェッショナルなビジネスWebサイトに適しています。最小限の要素を備えたシンプルなレイアウトが特徴で、明るいテーマと暗いテーマの両方でうまく機能します。
トップに戻るボタンコンポーネント
マイクロインタラクションと鮮やかな色でデザインされたレスポンシブバック・トゥ・トップ・ボタンは、ダークモードをサポートするダッシュボードインターフェースに適しています。