CCHub Logo CCHub Tailwind Collection
组件 Back to Top 按钮 粗犷主义返回顶部按钮

粗犷主义返回顶部按钮

返回顶部按钮组件，采用粗犷主义风格，三原色方案，并具有复杂的复杂性。响应式设计支持黑暗主题。不使用JavaScript。

预览

HTML 代码 

<a href="#" class="fixed bottom-4 right-4 bg-red-500 dark:bg-cyan-500 text-yellow-300 dark:text-magenta-500 p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-cyan-500 border-4 border-black dark:border-white z-50">
    <svg class="w-6 h-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>
</a>

相关组件

Back to Top 按钮

用于电子商务的返回顶部按钮，具有充满活力的深色模式设计。

打开

Back to Top 按钮

一个简单而优雅的返回顶部按钮，固定在屏幕的右下角。具有微妙的柔和配色方案和平滑的悬停/聚焦微交互。该按钮包括响应式设计，内置深色模式支持。悬停时，该按钮会轻轻放大并更改背景颜色以提供视觉反馈。该组件仅使用 Tailwind CSS 类，无需 JavaScript。

打开

Back to Top Button 组件

用于文档/wiki 站点的响应式“Back to Top”按钮组件，灵感来自 Memphis Design，采用紫色/紫色配色方案。包括深色模式支持和复杂的交互式外观。

打开