/* 定义按钮的默认样式 */
button {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #007bff;
border: 1px solid transparent;
border-radius: 0.25rem;
transition: all 0.2s;
cursor: pointer;
}
/* 鼠标悬停时按钮样式 */
button:hover {
background-color: #0069d9;
}
/* 按钮被点击时的样式 */
button:active {
background-color: #007bff;
border-color: #007bff;
}
/* 禁用状态的按钮 */
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}上述代码中，大家先定义了按钮的默认样式。通过display属性设置为inline-block，按钮可以在一行中占用一定的宽度并保持行内元素的特性。这里还定义了按钮的一些内部和外部样式，比如padding、border-radius和transition等等。接下来，大家针对不同状态的按钮进行了样式定制，比如鼠标悬停时的样式、按钮被点击时的样式以及禁用状态的样式。
值得一提的是，大家也可以使用伪元素（pseudo-element）来扩展按钮的样式。比如，大家可以通过:before伪元素为按钮添加左侧图标，比如一个“+”或者“-”符号。这里提供一个伪元素的样式示例：
/* 定义带图标的按钮 */
button:before {
content: "+";
display: inline-block;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
text-align: center;
font-size: 1.25rem;
font-weight: bold;
line-height: 1.25rem;
background-color: #fff;
border: 1px solid #007bff;
border-radius: 50%;
transition: all 0.2s;
}
/* 悬停时的样式 */
button:hover:before {
background-color: #f8f9fa;
}
/* 被点击时的样式 */
button:active:before {
background-color: #007bff;
color: #fff;
transform: scale(1.2);
}通过:before伪元素，大家可以实现按钮的图标定制。这里定义了一个“+”符号，并且利用伪元素在按钮左侧添加了这个图标。通过在hover状态和active状态针对:before进行定制，大家也可以实现按钮样式的小幅度的变化。
总的来说，CSS定义按钮的方法有很多，从简单的样式定制到复杂的动画效果，都可以通过CSS轻松实现。在开发过程中，大家需要根据不同的需求和场景，灵活运用CSS进行按钮样式的定制。