16款CSS按鈕圖解

.button {
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #0077cc;
}
.button:hover {
background-color: #005fa3;
}
.button:active {
background-color: #004d80;
}
.button:focus {
outline: none;
}
.btn-primary {
background-color: #0077cc;
}
.btn-primary:hover {
background-color: #005fa3;
}
.btn-primary:active {
background-color: #004d80;
}
.btn-secondary {
background-color: #6c757d;
}
.btn-secondary:hover {
background-color: #5a6268;
}
.btn-secondary:active {
background-color: #474f54;
}
.btn-success {
background-color: #28a745;
}
.btn-success:hover {
background-color: #218838;
}
.btn-success:active {
background-color: #1e7e34;
}
.btn-danger {
background-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
}
.btn-danger:active {
background-color: #bd2130;
}

上述代碼展示了16款使用CSS制作的按鈕，其中包括基礎樣式的.button，以及.btn-primary、.btn-secondary、.btn-success、.btn-danger四個預設樣式。

基礎樣式的.button除了普通狀態外，還設定了hover、active、focus狀態的顏色變化效果，并設置了圓角和內邊距。不同預設樣式的按鈕則僅僅在顏色上有所區別。

通過使用這些預設樣式，可以快速搭建出符合視覺風格和功能需求的按鈕。