在使用 Vue-cli 和 Element UI 开发项目时，有时默认的按钮样式可能无法完全满足设计需求。比如，当我们想要调整按钮在聚焦（`:focus`）状态下的视觉效果时，可以通过自定义 CSS 实现。在 Element 的按钮组件中，默认的聚焦样式可能显得单调，这时我们可以通过覆盖默认样式来优化用户体验。
首先，在你的全局样式文件或组件样式中添加如下代码：
```css
.el-button:focus {
background-color: 409EFF; / 聚焦时背景颜色 /
color: white; / 文字颜色 /
border-color: 409EFF; / 边框颜色 /
}
```
这样，当你点击并聚焦按钮时，按钮会呈现出更亮眼的效果，吸引用户注意。此外，你还可以进一步微调其他伪类状态如 `hover` 或 `active`，让按钮交互更加流畅。💡
通过这种方式，即使使用的是现成的 UI 库，也能轻松定制出符合品牌风格的按钮样式！🚀