组件 按钮 玻璃化按钮组件

玻璃化按钮组件

一个简单的响应式玻璃化按钮组件,采用柔和的色彩和黑暗模式支持,使用Tailwind CSS。

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

相关组件

按钮组件

一组专为作品集设计的交互式按钮,具有微交互、互补配色方案和完全响应能力,并支持深色模式。

打开

俏皮的娱乐按钮

一组专为娱乐或媒体平台设计的俏皮有趣的按钮,具有柔和/不饱和的颜色和圆润的元素。响应式,包括深色模式支持。

打开

按钮组件

一组用于 CRM/业务工具应用程序的交互式按钮,具有微交互、宝石色调和完全响应能力,并支持深色模式。

打开