CCHub Tailwind Collection

组件 Back to Top 按钮 Back to Top 按钮

Back to Top 按钮

一个简单的 Back to Top 按钮，带有 Glassmorphism 设计和 Monochromatic 配色方案，适用于电子商务网站。

预览

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>

相关组件

回到顶部按钮

一个极简的“返回顶部”按钮，使用 Tailwind CSS 设计，具备响应效果和暗黑主题支持。

打开

Back to Top 按钮

Back to Top 按钮，具有 Neumorphic 设计、单色配色方案和深色模式支持。使用 Tailwind CSS。

打开

Back to Top Button 组件

响应式返回顶部按钮组件，采用 Glassmorphism 设计、大地色调配色方案和复杂的交互，适用于仪表板。

打开