组件 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>

相关组件

Follow Button 组件

专为房地产平台设计的响应式“关注”按钮组件,具有企业蓝色配色方案、深色模式支持和微妙的交互式悬停效果。

打开

Neumorphic Follow Button 组件

一个复杂的、中构风格的跟随按钮组件,具有日落/暖色调,专为房地产平台设计。它具有响应式设计和深色模式支持,使元素看起来使用微妙的阴影从背景中突出。

打开

Follow Button 组件

一个复杂的、受纸张/印刷启发的跟随按钮组件,适用于游戏网站,采用黑白单色设计,具有明亮的强调色,针对响应速度和深色模式进行了优化。

打开