在網頁設計中，按鈕樣式是一個非常經典的設計元素。CSS按鈕樣式的設計可以讓網站的UI更加美觀、易于識別和易于使用。下面是一些經典的CSS按鈕樣式。

/* 普通按鈕樣式 */
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #007bff;
border: 1px solid #007bff;
border-radius: 5px;
transition: all .3s ease-in-out;
}
/* 鼠標懸停樣式 */
.btn:hover {
color: #007bff;
background-color: #fff;
border-color: #007bff;
}
/* 按鈕按下樣式 */
.btn:active {
transform: translateY(2px);
}
/* 禁用按鈕樣式 */
.btn:disabled {
opacity: .5;
cursor: not-allowed;
}

這是一些最基本的樣式，可以讓按鈕看起來簡單而有吸引力。同時，還需要注意按鈕的互動性，例如鼠標懸停和按鈕按下的效果，以及禁用按鈕的樣式。

/* 帶圖標的按鈕樣式 */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #007bff;
border: 1px solid #007bff;
border-radius: 5px;
transition: all .3s ease-in-out;
}
/* 圖標樣式 */
.btn-icon i {
margin-right: 5px;
}
/* 鼠標懸停樣式 */
.btn-icon:hover {
color: #007bff;
background-color: #fff;
border-color: #007bff;
}
/* 按鈕按下樣式 */
.btn-icon:active {
transform: translateY(2px);
}
/* 禁用按鈕樣式 */
.btn-icon:disabled {
opacity: .5;
cursor: not-allowed;
}

除了基本的按鈕樣式外，還可以為按鈕添加圖標。這些按鈕樣式可以讓按鈕更豐富和更具有表現力。上面的代碼是一個帶圖標的按鈕樣式，代碼中使用i標簽來添加圖標。

/* 邊框按鈕樣式 */
.btn-border {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #007bff;
background-color: transparent;
border: 1px solid #007bff;
border-radius: 5px;
transition: all .3s ease-in-out;
}
/* 鼠標懸停樣式 */
.btn-border:hover {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
/* 按鈕按下樣式 */
.btn-border:active {
transform: translateY(2px);
}

如果你想讓你的按鈕看起來不那么厚重，那么可以嘗試使用邊框按鈕樣式。這個按鈕看起來非常漂亮，因為它是透明的，它只有一個邊框。當然，我們也需要進行鼠標懸停和按鈕按下的效果。