按鈕在網(wǎng)頁設(shè)計(jì)中有著重要的作用，而CSS可以讓按鈕的設(shè)計(jì)更加美觀、扁平化。下面我們來了解如何通過CSS設(shè)置好看的按鈕。

1. 改變按鈕的顏色

button {
background-color: #4CAF50; /*綠色 */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

2. 添加陰影效果

button {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);
}

3. 圓角效果

button {
border-radius: 15px;
}

4. 改變鼠標(biāo)懸停時(shí)的效果

button:hover {
background-color: #3e8e41;
}

5. 點(diǎn)擊效果

button:active {
background-color: #2f6f33;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

6. 透明度

button {
opacity: 0.8;
}

以上是CSS設(shè)置按鈕的一些常見技巧，有了這些，我們就可以設(shè)計(jì)出更加美觀的按鈕來優(yōu)化頁面的視覺效果。