粗犷风格返回顶部

一个采用灰阶颜色和Tailwind CSS的野兽派回到顶部按钮组件。它是响应式的，并支持深色模式。

预览

HTML 代码

<button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>

相关组件

返回顶部按钮

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

打开

返回页首按钮 - 粗野主义

用于投资组合的粗野派“Back to Top”按钮组件，具有三重配色方案和简单的设计。它是响应式的，并支持使用 Tailwind CSS 的深色模式。

打开

回到顶部按钮

一个最小且响应迅速的“Back to Top”按钮组件，支持深色模式。它在向下滚动后显示，并使用平滑滚动在单击时将用户返回到页面顶部。没有 JavaScript 用于滚动，只有 CSS。

打开