CSS是前端開發中必不可少的技術之一。通過CSS我們可以輕松地定義網站的樣式和布局。其中，按鈕（Button）是我們網站中經常使用的交互控件之一。在CSS中，我們可以使用偽類（pseudo-class）和偽元素（pseudo-element）對按鈕進行定義和樣式定制。

/* 定義按鈕的默認樣式 */
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進行按鈕樣式的定制。