组件 按钮 按钮组件

按钮组件

响应式按钮组件,支持 Material Design、三元色方案和深色主题。

预览

HTML 代码

<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</button>
</div>

相关组件

Gradient_Weather_Buttons

一组用于天气预报和气候数据的响应式按钮,具有紫色/紫色渐变、平滑的悬停过渡和深色模式支持。

打开

俏皮的娱乐按钮

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

打开

Retro_Rainbow_Buttons_Component

专为摄影画廊和作品集设计的复古主题渐变彩虹按钮集合,具有适度的复杂度和完全响应能力,并支持深色模式。

打开