enhanced-button

在 shadcn-button 基础上提供 10 种开箱即用的效果变体（如 Shine、Gooey、Gradient Slide Show）和 5 种尺寸，无需创建额外组件即可直接复用。

它能做什么

enhanced-button 保留了 shadcn-button 的 variant（default/destructive/outline/secondary/ghost/link）与 size（default/sm/lg/icon）体系，额外增加 effect 属性，支持 expandIcon、ringHover、shine、shineHover、gooeyRight、gooeyLeft、underline、hoverUnderline、gradientSlideShow 共 10 种效果。所有效果通过 Tailwind CSS 类实现，不依赖额外 JS 运行时。

• expandIcon：图标在 hover 时从 0 宽度滑入，支持 left/right 位置
• shine：静态斜向光晕（伪元素动画）
• shineHover：光晕在 hover 时从右向左扫过，持续 1 秒
• gooeyRight/gooeyLeft：圆形渐变从角落展开覆盖按钮
• underline/hoverUnderline：底部线条从中间或右侧展开/收缩
• gradientSlideShow：四色渐变背景自动流动（需自定义 CSS 变量）

怎么上手

从 GitHub 仓库（jakobhoeg/enhanced-button）复制 src/components/ui/button.tsx 与 tailwind.config.ts 中的配置，粘贴到已有 shadcn/ui 项目中即可。无需安装额外依赖，所有效果依赖的 CSS 动画（如 animate-shine、animate-gradient-flow）已在 tailwind.config 中预设。

• 复制文件：仅需 button.tsx 和 tailwind.config.ts 两个文件
• 引入方式：import { Button } from '@/components/ui/button'
• 使用示例：<Button effect="shine" variant="destructive">删除</Button>
• 图标支持：通过 icon 属性传入 React 组件，配合 iconPlacement="left|right"

和同类组件的差异

与 Element Plus 的 Button 相比，enhanced-button 专为 shadcn/ui 生态设计，不提供 type（primary/success/warning 等）语义色，而是复用 shadcn 的 variant 体系。Element Plus 按钮侧重于表单场景的 type/plain/round/circle 样式，而 enhanced-button 侧重 hover 动效与视觉反馈，且所有效果基于 Tailwind CSS 伪元素与 transition，无需 Vue 或额外 JS 库。

• 无框架锁定：仅依赖 React + Radix Slot + CVA，不与 Vue/Angular 绑定
• 效果独立：每个 effect 互斥，不支持同时叠加多个效果
• 尺寸继承：size 属性与 shadcn 完全一致，可配合 icon 尺寸使用

常见问题

Q1：enhanced-button 是否兼容 shadcn/ui 的旧版本 button？

A1：兼容。enhanced-button 的 buttonVariants 在 shadcn 原有 variant/size 基础上新增 effect 字段，旧代码中未使用 effect 的按钮行为不变。

Q2：gradientSlideShow 效果需要自定义 CSS 变量吗？

A2：需要。该效果引用 --gradient-lime、--gradient-ocean、--gradient-wine、--gradient-rust 四个 CSS 变量，需在全局样式或 tailwind.config 中定义具体色值。

Q3：能否在 Next.js App Router 中使用 enhanced-button？

A3：可以。button.tsx 使用 'use client' 指令（因依赖 React state 与事件），在 App Router 中需确保 Button 组件在客户端组件中引用。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。