可视化设计 CSS 按钮
概述
按钮是任何网站上最常用的元素之一，而把它的外观——内边距、颜色、圆角、阴影、悬停状态——调好，需要不少细碎的 CSS。按钮生成器让你用可视化控件为按钮设置样式并实时预览，然后复制确切的 CSS。此工具在浏览器中构建可直接使用的按钮样式，让你无需从零写 CSS 就能匹配设计。
使用步骤
- 1
设置基础样式
为按钮选择背景色和文字色、内边距、圆角以及字体。
- 2
添加悬停状态
定义按钮在悬停时如何变化——变色、阴影或轻微移动。
- 3
复制 CSS
把生成的按钮 CSS（如提供还有 HTML）粘贴进你的项目。
工作原理
你用控件调整属性——背景色、文字色、内边距、圆角、边框、字体和阴影——同时实时预览显示按钮。许多生成器还让你设置悬停状态，让按钮响应光标。满意后，工具便输出可粘贴进项目的 CSS（通常还有 HTML）。一切都在浏览器本地运行。
什么时候用
为符合品牌的行动号召按钮设置样式。快速原型化按钮变体（主要、次要、幽灵）。无需反复试错即可获得悬停或激活状态的 CSS。学习内边距、圆角和阴影如何组合成按钮外观。制作可在整站复用的统一按钮样式。匹配设计稿中的按钮。
常见问题
对操作（提交、切换）用 <button> 元素，对跳转到另一页面用 <a>。两者都能用生成的 CSS 设置样式，但为了无障碍请选对元素——屏幕阅读器和键盘依赖它。
注意事项
一个好看的按钮仍需无障碍的基本要素：足够的对比度、清晰的焦点状态和足够大的点按目标。另外请测试悬停和激活状态，因为静止时很好看的样式在被交互时可能不清晰。