组件 Follow 按钮 玻璃态关注按钮

玻璃态关注按钮

一个具有玻璃风格设计的响应式关注按钮,支持暗黑模式,使用Tailwind CSS.

预览

HTML 代码

<template>
  <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
      Follow
    </span>
  </button>
</template>

相关组件

材料设计关注按钮

一个响应式的单色材料设计关注按钮组件,适用于博客,支持深色模式。

打开

粗犷主义关注按钮

一个野兽派跟随按钮,支持响应式和深色模式。

打开

关注按钮组件

一个复杂的响应式关注按钮组件,采用玻璃拟态风格和鲜艳的颜色,专为支持深色模式的商业网站设计,使用 Tailwind CSS.

打开