按钮特效生成工具

⚙️ 特效控制

📝 按钮内容

按钮文字

字体大小

18px

字体粗细

📏 按钮尺寸

按钮宽度

120px

按钮高度

44px

边框圆角

8px

🎨 基础样式

文字颜色

#ffffff

背景颜色

#667eea

边框样式

边框宽度

2px

边框颜色

#667eea

✨ 特效选择

可以同时选择和设置多种特效

阴影效果

渐变背景

发光效果

3D效果

霓虹灯效果

按压效果

玻璃态效果

悬停效果

🌑 阴影设置

水平偏移

5px

垂直偏移

5px

模糊半径

10px

阴影颜色

#666666

🌈 渐变设置

开始颜色

#667eea

结束颜色

#764ba2

渐变方向

👆 悬停效果

悬停文字颜色

#ffffff

悬停背景颜色

#764ba2

悬停缩放比例

1.05

悬停旋转角度

0°

悬停阴影效果

悬停阴影颜色

#ff6b6b

悬停发光效果

0px

过渡时间

0.3s

💡 发光设置

发光颜色

#667eea

发光强度

10px

🌀 动画设置

动画效果

动画速度

中速

👁️ 实时预览

🎨 预设特效

💻 生成的CSS代码

CSS 样式代码

.button-effect {
  font-size: 18px;
  font-weight: 500;
  width: 120px;
  height: 44px;
  color: #ffffff;
  background-color: #667eea;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 5px 5px 10px #666666;
  transition: all 0.3s ease;
}

CSS属性数: 10 代码长度: 250 字符

📋 使用说明

1. 在左侧面板调整按钮内容和特效参数

2. 预览区域会实时显示特效效果

3. 右侧会生成对应的CSS代码

4. 点击"复制CSS"按钮复制代码到剪贴板

5. 可以点击预设特效按钮快速应用效果