回到顶部按钮

一个为电子商务网站设计的极简扁平化返回顶部按钮组件，采用灰度配色方案，支持黑暗主题的响应式设计。

预览

HTML 代码

<div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

相关组件

回到顶部按钮

一个响应式返回顶部按钮组件，采用玻璃拟态效果，适用于专业的企业网站。它具有简单的布局和最少的元素，适用于浅色和深色主题。

打开

Back to Top Button 组件

适用于电子商务网站的响应式“Back to Top”按钮组件，采用黑白单色设计，具有明亮的强调色，并在悬停时提供引人入胜的微交互。包括深色模式支持。

打开

Neumorphic Back to Top 按钮

用于电子商务的中态“返回顶部”按钮，提供微妙、柔和的 UI 设计，使用精致的阴影与背景融为一体。它具有相似的颜色，外观和谐，布局简单，响应式设计，支持深色主题，非常适合在线购物体验。

打开