GSAP buttons

弹性按钮

跟随指针填充的描边按钮，以及弹出图形装饰的文字按钮。

交互方式

描边按钮跟随鼠标位置填充，文字按钮悬停或聚焦时弹出装饰图形。

使用示例

import { StrokeButton, FlairButton } from "@/components/ui/gsap-buttons"

export function Demo() {
  return <><StrokeButton>继续</StrokeButton><FlairButton words={["Start", "now"]} /></>
}

参数

参数	类型 / 默认值	说明
`children`	`ReactNode`"Get GSAP"	StrokeButton 的内容。
`words`	`[string, string]`["Get", "GSAP"]	FlairButton 的两段文字。
`onClick`	`MouseEventHandler`	两个按钮均支持原生按钮属性与点击回调。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxgsaptailwind-merge

components/ui/gsap-buttons.css
components/ui/gsap-buttons.tsx
lib/utils.ts

来源

参考 GSAP 网站按钮效果，保留原有动画曲线及图形，https://gsap.com。