CSS可以幫助我們設(shè)計出美觀的網(wǎng)頁，也可以方便我們定制網(wǎng)頁元素的樣式。在很多網(wǎng)站中，我們經(jīng)常會看到類似于“確定”、“取消”這兩個按鈕的出現(xiàn)。如何使用CSS對這兩個按鈕進行設(shè)計和樣式的設(shè)置呢？

.button{
border-radius: 5px;
padding: 8px 15px;
margin: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #FFF;
}
.cancel{
background-color: #FF0000;
}
.confirm{
background-color: #008000;
}

首先，我們在CSS代碼中給這兩個按鈕分別添加了兩個class，分別為“.cancel”和“.confirm”。在“.button”class中設(shè)置了按鈕的基本屬性，包括圓角半徑、內(nèi)邊距、外邊距、字體大小、字體加粗等等。

在“.cancel”class中，我們設(shè)置了該按鈕的背景顏色為紅色，表示為取消按鈕。在“.confirm”class中，我們設(shè)置了該按鈕的背景顏色為綠色，表示為確定按鈕。

接下來，在HTML代碼中，我們只需要將對應(yīng)的class引入即可：

<button class="button cancel">取消</button>
<button class="button confirm">確定</button>

這樣，我們就可以很快地定制出一組漂亮的“取消”、“確定”按鈕了。這種CSS設(shè)置按鈕的方式不僅能讓我們的網(wǎng)站變得更加美觀，而且還能提高我們的開發(fā)效率，是一種非常實用的技巧。