组件 Back to Top 按钮 返回页首按钮 - 粗野主义

返回页首按钮 - 粗野主义

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

预览

HTML 代码

<a href="#" class="fixed bottom-4 right-4 bg-red-500 text-yellow-300 border-4 border-black dark:bg-red-700 dark:text-yellow-100 dark:border-white transition-all duration-300 hover:bg-red-600 hover:text-yellow-400 dark:hover:bg-red-800 dark:hover:text-yellow-200 p-4 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] z-50">
    <span class="font-extrabold text-xl uppercase">↑<br/>Top</span>
</a>

相关组件

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

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

打开

回到顶部按钮

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

打开

Back to Top 按钮

一个简单的 Back to Top 按钮,带有 Glassmorphism 设计和 Monochromatic 配色方案,适用于电子商务网站。

打开