CCHub Logo CCHub Tailwind Collection
コンポーネント トップに戻るボタン トップに戻るボタンコンポーネント

トップに戻るボタンコンポーネント

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>

関連コンポーネント

トップに戻るボタンコンポーネント

eコマース用に設計されたレスポンシブな「Back to Top」ボタンコンポーネントで、暗い背景に鮮やかな配色が特徴です。微妙なホバー効果が含まれており、ダークモードのサポートにより、すべての画面サイズで視認性を確保します。

開ける

トップに戻るボタンコンポーネント

CRM/ビジネスツール用の「トップに戻る」ボタンは、バウハウススタイルでデザインされ、ハイコントラストカラーで、幾何学的な形状とダークモードのサポートを含むすべての画面サイズでの応答性を特徴としています。

開ける

トップに戻るボタンコンポーネント

eコマースサイト向けのレスポンシブな「Back to Top」ボタンコンポーネントで、明るいアクセントカラーの黒と白のモノクロデザインと、ホバー時の魅力的なマイクロインタラクションが特徴です。ダークモードのサポートが含まれています。

開ける