从你喜欢的样式开始
浏览“日常”、“经典”、“异形”、“表现力”、“渐变”和“精英”系列中的 44 预设。每个预设都是你可以编辑的起点。
预设如何影响你的设计
先选择，再微调
使用样式集合来缩小图库范围。应用预设会替换默认样式和悬停样式，同时保留按钮文本和类名。
尝试简单的纯色填充、圆角形状、清晰的轮廓或更具装饰性的处理方式。一旦确定了方向，请使用其他选项卡来调整细节以适配你的页面。
创建 CSS 按钮，一次调整一个细节。
直观地设计按钮样式，并获取用于网站的 HTML 和 CSS。从预设开始，调整排版、颜色、形状和阴影，然后在导出前预览交互状态。
视频教程
如何创建一个 CSS 按钮
选择一个预设，个性化您的按钮，然后复制或下载 CSS。
英语旁白
观看视频
让标签感觉恰到好处
设置按钮文本、字体系列、大小、字重、间距、行高、对齐方式和文本颜色。在操作时查看标签的实时更新。
微调文本和间距
适合操作的排版
文本包含字体控件和第二个按钮文本字段。字体大小范围从 10 到 80 像素；所列字体系列使用访问者设备上可用的字体。
使用描述操作的简短标签。在“填充”中，水平和垂直内边距可以在不改变字体大小的情况下增加周围的空间。在按钮将要使用的页面中检查较长的标签。
选择纯色或渐变填充
使用一种背景颜色，或通过线性渐变混合两种颜色。颜色选择器和十六进制输入框让你能够直观或精确地进行操作。
设置颜色和渐变方向
两种颜色，一个清晰的方向
在“填充”中，将填充样式更改为“线性渐变”以显示“第二颜色”和“渐变角度”。角度范围从 0 到 360 度。
十六进制字段接受完整的六位颜色代码或三位简写。在渐变的两端测试白色或彩色标签；工作室不会自动验证文本对比度。
控制轮廓和深度
调整链接或独立的圆角、边框宽度和样式、盒阴影以及文本阴影。赋予按钮适合其上下文的形状。
探索圆角、边框和阴影
从清晰的矩形到柔和的药丸形
在“形状”中，保持“链接所有圆角”开启以获得统一的半径，或将其关闭以分别设置每个圆角。边框样式包括实线、虚线、点线、双线、内嵌、外凸、脊状、槽状和无。
在“阴影”中，设置水平和垂直偏移、模糊、颜色和不透明度。盒阴影还具有扩展和内嵌开关。文本阴影是独立的，因此你可以在不改变按钮轮廓的情况下增加标签的深度。
同时设计交互
分别编辑“默认”和“悬停”样式。预览“默认”、“悬停”和“激活”外观，然后在浅色和深色画布上比较按钮。
了解编辑和预览状态
两种可编辑样式，三种预览状态
编辑状态决定了你的控件更改哪种样式。画布状态按钮仅选择预览。悬停或按下预览也会显示其交互效果。
与默认值匹配的悬停值会遵循基础编辑，直到被自定义。导出的 CSS 在需要时包含悬停规则、焦点可见轮廓、激活移动和减少运动规则。
将 CSS 引入你的项目
复制生成的 CSS 和匹配的 HTML 按钮，或下载样式表。类名使这两部分保持连接。
复制、下载并保存你的工作
你可以直接使用的纯代码
选择一个独特的类名，从其选项卡复制 CSS，然后从 HTML 复制按钮。下载会保存一个以类名命名的 .css 文件；它不会下载完整的网页。
预览和代码生成在你的浏览器中运行。工作室会尝试在此浏览器的本地存储中记住一个草稿；导出任何你想保留的内容。“重置”会将工作室恢复到其初始样式。
输入文本和样式。输出 HTML 和 CSS。
无需上传。JavaScript 为你浏览器中的实时编辑器提供支持。分别复制 HTML 和 CSS，或下载 CSS 样式表。生成的字体栈使用查看者设备上可用的字体。