Interaction
变形渐变按钮
带有流动动画渐变边框和背景的按钮,颜色之间缓慢变形过渡。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a single CTA button with a morphing gradient effect. The button background should be a conic or linear gradient that continuously animates through deep violet, magenta, coral, and amber. Add a subtle outer glow that pulses in sync with the gradient. The button text should be white, semibold, and centered. On hover, the animation speeds up slightly and the button scales to 1.02. Use CSS keyframes and background-position or mask techniques; avoid heavy JS. Use Tailwind CSS. Place it on a dark background so the gradient glow is visible.
中文提示词
创建一个带有变形渐变效果的单一 CTA 按钮。按钮背景应为锥形或线性渐变,在深紫、洋红、珊瑚和琥珀之间持续动画变化。添加与渐变同步脉冲的微妙外发光。按钮文字应为白色、半粗体、居中。悬停时动画略微加速,按钮缩放至 1.02。使用 CSS keyframes 和 background-position 或遮罩技术,避免大量 JS。使用 Tailwind CSS。将其放在深色背景上,使渐变发光可见。

Overview
一个让人感觉有生命力的按钮。变形渐变无需图片即可打造高级、引人注目的 CTA。
Features
- 持续变形的渐变背景
- 脉冲外发光
- 白色居中标签
- 悬停加速与缩放
- 纯 CSS 动画
- 针对深色背景优化
Usage
用作深色落地页、发布页或高端产品站的主 CTA。
Customization
修改 prompt 以:
- 在顶部添加玻璃反光光泽
- 将渐变更改为冷色调(青色、蓝绿色、蓝色)
- 添加磁性光标吸引效果
- 将边框半径改为全圆或胶囊形