Web 前端中 CSS 按鈕是頁面設計中不可或缺的一部分。CSS 按鈕可以不僅僅是讓網站看起來更美觀，還可以讓用戶更方便的操作網站。下面將會介紹 CSS 按鈕的基本用法和常見樣式，以及一些實用技巧。

/* 基本按鈕樣式 */
.btn {
padding: 10px 20px;
border: 1px solid #333;
border-radius: 3px;
background-color: #fff;
color: #333;
cursor: pointer;
}
/* 常見樣式 */
.btn-primary {
background-color: #007bff;
color: #fff;
}
.btn-success {
background-color: #28a745;
color: #fff;
}
.btn-warning {
background-color: #ffc107;
color: #333;
}
.btn-danger {
background-color: #dc3545;
color: #fff;
}
.btn-info {
background-color: #17a2b8;
color: #fff;
}
/* 實用技巧 */
/* 1. 按鈕 hover 效果 */
.btn:hover {
background-color: #f2f2f2;
}
/* 2. 按鈕 active 效果 */
.btn:active {
background-color: #dee2e6;
border-color: #adb5bd;
}
/* 3. 按鈕禁用狀態 */
.btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* 4. 按鈕加載狀態 */
/* HTML */Loading.../* CSS */
.btn:disabled >.spinner-border {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
/* 5. 按鈕組合 */
/* HTML */
LeftMiddleRight
/* CSS */
.btn-group {
display: inline-block;
}
.btn-group >.btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group >.btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group >.btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group >.btn:not(:first-child) {
margin-left: -1px;
}