此示例仅使用生成器的控件。上方的图片显示了应用于普通 HTML 按钮的实际下载样式表，而非编辑器截图。
从 Signature 开始
打开 CSS 按钮生成器。在“预设”中，从 Everyday 集合中选择 Signature。将按钮文本设置为“Get started”。在代码区域，将类名设置为 cta-button。
预设会替换默认和悬停样式，同时保留您的标签和类名。在进行详细调整之前，请先选择您的起点。
类名将 CSS 规则连接到您的 HTML 按钮。生成器会清理不支持的字符；请使用简短且独特的名称，以避免影响不相关的元素。
创建渐变胶囊
保持编辑状态为“默认”。在“文本”中，选择 System sans，字号 18 px，字重 Bold。保持白色文本颜色、常规样式、居中对齐和行高 1.4。
在“填充”中，选择线性渐变。使用下方的两种颜色和角度。设置水平内边距为 32 px，垂直内边距为 16 px。在“形状”中，保持“链接所有角”启用，并将圆角半径设置为 100 px。边框宽度保持 0 px。
在“阴影”中，保持“盒阴影”启用。使用水平偏移 0 px，垂直偏移 8 px，模糊 24 px，扩展 −4 px，颜色 #460BD8，不透明度 32%。保持内阴影和文字阴影关闭。
内边距改变文本周围的空间。圆角半径改变轮廓。较大的半径可以创建这种胶囊形状，而无需加宽标签。
为悬停设置独立效果
将编辑状态切换为“悬停”。在“填充”中，将背景颜色更改为 #33099E，第二种颜色更改为 #6D20BF。保持渐变角度为 135°。在“阴影”中，将垂直偏移更改为 10 px，模糊更改为 28 px。保持其他设置不变。
使用画布上的“默认”、“悬停”和“激活”按钮来检查每种状态。您也可以悬停在预览按钮上或按下它。在浅色和深色画布之间切换，以查看其边缘和阴影。
编辑状态选择您要更改的样式。画布状态仅更改您预览的内容。在调整静态外观之前，请返回到默认编辑状态。
与默认值匹配的悬停属性会跟随后续的默认编辑。一旦您自定义了悬停属性，它将保持独立。更改基础样式后，请重新检查两种状态。
导出并在您的页面中测试
选择 CSS 选项卡并使用“复制 CSS”，或选择“下载”以保存 cta-button.css。选择 HTML 选项卡并复制匹配的按钮标记。HTML 包含相同的类名和一个 type="button" 的按钮。
将 CSS 添加到您的样式表中，或从您的页面链接下载的文件。将 HTML 放置在按钮所属的位置。这两个导出文件协同工作：仅有 HTML 按钮而不包含其样式是无效的。
打开页面并测试其默认、悬停、键盘焦点和按下状态。导出内容包含 focus-visible 轮廓、微小的激活位移和 reduced-motion 规则。您周围的样式和已安装的字体仍可能影响结果。
生成的按钮是一个带样式的控件。在您的项目中连接其点击行为；在添加到表单时使用正确的按钮类型。
cta-button.css
下载的文件名遵循类名。
常见问题
我需要 CSS 框架吗？
不需要。输出是标准的 CSS 加上一个普通的 HTML 按钮。将 CSS 粘贴到您自己的样式表中，并在按钮上使用匹配的类名。
下载是否也保存了 HTML？
下载会保存一个以类名命名的 .css 文件。请从 HTML 选项卡单独复制按钮标记。
我可以给每个角设置不同的半径吗？
可以。在“形状”中，关闭“链接所有角”，然后分别设置左上、右上、右下和左下角。此示例为了保持胶囊形状而将它们链接在一起。
下次我还能看到我的设计吗？
工作室会尝试将当前草稿保存在此浏览器的本地存储中。这不是账户或跨设备备份。浏览器设置、清除站点数据或重置操作可能会删除或替换它，因此请导出您想要保留的作品。
我的按钮会上传到服务器吗？
样式预览和 CSS/HTML 生成均在您的浏览器中运行。编辑器不会上传您的按钮文本或样式草稿来创建导出文件。
为您的下一个按钮赋予独特的风格。
选择一个起点，调整细节，并将代码应用到您的项目中。