Interaction
磁性按钮
在小半径内向光标方向磁性吸引的按钮。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a single magnetic button. When the cursor enters a small radius around the button, the button should translate toward the cursor and scale up slightly. Use JavaScript to calculate the offset based on cursor position relative to the button center, and CSS transform for smooth movement. Use Tailwind CSS. Place on a dark background with a subtle border and a glowing hover state.
中文提示词
创建一个磁性按钮。当光标进入按钮周围小半径时,按钮应向光标方向移动并轻微放大。使用 JavaScript 根据光标相对于按钮中心的位置计算偏移,CSS transform 实现平滑移动。使用 Tailwind CSS。放置在深色背景上,带微妙边框和发光悬停状态。

Overview
一个感觉有生命力、对注意力作出响应的按钮。为主要的 CTA 增添触感愉悦。
Features
- 光标吸引位移
- 接近时轻微缩放
- 平滑 CSS transform
- 深色背景
- 微妙边框
- 发光悬停状态
Usage
适用于高端落地页、作品集或产品发布的主 CTA。
Customization
修改 prompt 以:
- 为相邻文字添加磁性吸引
- 增大吸引半径
- 添加弹簧/lerp 效果
- 使用圆形或胶囊形