组件 Back to Top 按钮 返回顶部按钮组件

返回顶部按钮组件

一个极简主义风格的回到顶部按钮组件,使用Tailwind CSS。该组件具有大胆的高对比度设计,支持响应式效果和深色主题。

预览

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>

相关组件

返回顶部按钮组件

一个响应式“返回顶部”按钮,遵循材料设计原则,支持暗黑模式,使用Tailwind CSS进行样式和响应效果.

打开

返回顶部按钮

具有微交互、大地色调配色方案、商业/公司网站简单布局的 Back to Top 按钮组件;使用 Tailwind CSS 支持深色模式的响应式设计

打开

粗野主义返回顶部按钮

一个在Tailwind CSS中具有高对比度、大胆排版和锐利边缘的粗犷风格返回顶部按钮。包括响应式大小和暗模式支持。

打开