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的暗模式支持。

打开

返回顶部按钮组件

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

打开

返回顶部按钮

一个极简主义的平面设计“返回顶部”按钮，适合在仪表板界面中使用。按钮采用单色调色方案，并包含悬停和聚焦效果以增强互动性。它也是响应式的，并支持深色模式。

打开