確定按鈕在網頁設計中可謂是非常常用的控件之一。在傳統的網頁設計中，確定按鈕大多使用圖片或者JS來制作，但隨著CSS的不斷發展，現在已經可以用純CSS來制作一個漂亮的確定按鈕了！下面，讓我們來看看怎樣用純CSS編寫一個漂亮的確定按鈕。

/* 確定按鈕的基本樣式 */
button{
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family:"Microsoft Yahei";
border-radius: 5px;
}
/* 確定按鈕的Hover樣式 */
button:hover {
background-color: #3e8e41;
}
/* 確定按鈕的Focus樣式 */
button:focus {
outline: none;
box-shadow: 0 0 10px #4CAF50;
}
/* 確定按鈕的Active樣式 */
button:active {
background-color: #4CAF50;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

上述代碼中，我們先定義了一個基本樣式，其中包括了按鈕的背景色、字體顏色及對齊方式、邊框、圓角等等。接著，我們使用:hover來定義按鈕的懸浮樣式，通過改變背景顏色使按鈕在鼠標懸浮時有更好的視覺反饋效果。然后使用:focus來定義按鈕獲得焦點時的樣式，使用outline來去掉默認的外邊框，并添加一個淡藍色的邊框，使得按鈕更加醒目。最后，我們使用：active來定義按鈕的激活樣式，使得按鈕在被點擊時有一定的壓縮感。

總的來說，以上就是純CSS編寫確定按鈕的方法。使用純CSS可以讓我們的項目更加輕便，而且CSS的適應性很好，不同的瀏覽器展現效果基本一致，是現代網頁設計不可或缺的一個工具。