组件 Back to Top 按钮 回到顶部按钮 - 材料设计粉彩

回到顶部按钮 - 材料设计粉彩

一个响应式的 “Back to Top” 按钮组件,遵循 Material Design 原则,采用柔和的配色方案,专为作品集网站量身定制。它包括响应式设计和使用 Tailwind CSS 的深色模式支持。

预览

HTML 代码

<button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
</button>

相关组件

返回顶部按钮组件

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

打开

粗犷风格 返回顶部

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

打开

Back to Top Button 组件

专为电子商务设计的响应式“Back to Top”按钮组件,在深色背景上具有鲜艳的配色方案。它包括一个微妙的悬停效果,并通过深色模式支持确保在所有屏幕大小的可见性。

打开