组件 Back to Top 按钮 返回顶部按钮 - 3D设计

返回顶部按钮 - 3D设计

带有3D设计、响应效果和深色主题支持的返回顶部按钮,使用Tailwind CSS。不包含JavaScript。

预览

HTML 代码

<div class="fixed bottom-4 right-4 group">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg 
                 transform transition-transform duration-300 
                 group-hover:scale-110 group-active:scale-90 
                 dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>

相关组件

返回顶部按钮

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

打开

Art Deco 返回顶部按钮

一个复杂的、受装饰艺术启发的“Back to Top”按钮组件,具有几何图案和奢华的海洋/蓝色调,专为非营利/慈善网站设计。包括响应式设计和深色模式支持。

打开

回到顶部按钮

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

打开