组件 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>

相关组件

返回顶部按钮

返回顶部按钮组件,采用3D设计、鲜艳的色调和复杂的交互元素,适用于社交媒体界面,使用Tailwind CSS。包括响应式设计和暗主题支持.

打开

Back to Top Button 组件

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

打开

回到顶部按钮

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

打开