CSS（層疊樣式表）是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的一部分，它能讓網(wǎng)頁(yè)看起來(lái)更加美觀。而按鈕是網(wǎng)頁(yè)中重要的交互元素之一，如何使用CSS來(lái)制作漂亮的按鈕呢？下面就讓我們一起來(lái)學(xué)習(xí)吧！

/* 創(chuàng)建一個(gè)按鈕的樣式 */
button {
background-color: #4CAF50; /* 設(shè)置背景顏色 */
border: none; /* 不顯示邊框 */
color: white; /* 字體顏色為白色 */
padding: 15px 32px; /* 上下左右內(nèi)邊距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 下劃線 */
display: inline-block;
font-size: 16px; /* 字體大小 */
margin: 4px 2px; /* 外邊緣距離 */
cursor: pointer; /* 鼠標(biāo)樣式 */
border-radius: 8px; /* 圓角 */
box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 陰影效果 */
}
/* 鼠標(biāo)懸停時(shí)按鈕的樣式 */
button:hover {
background-color: #3e8e41; /* 按鈕背景顏色變?yōu)樯罹G色 */
}
/* 鼠標(biāo)點(diǎn)擊時(shí)按鈕的樣式 */
button:active {
background-color: #3e8e41; /* 按鈕背景顏色變?yōu)樯罹G色 */
box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* 陰影效果變深 */
transform: translateY(2px); /* 按鈕向下移動(dòng)2px */
}

通過(guò)以上CSS代碼，我們可以輕松地創(chuàng)建一個(gè)漂亮的按鈕，并且當(dāng)鼠標(biāo)懸停和點(diǎn)擊時(shí)，按鈕的樣式也會(huì)相應(yīng)變化。如果想讓按鈕的樣式更加多樣化，只需對(duì)這段代碼進(jìn)行微調(diào)即可。