在網(wǎng)頁(yè)設(shè)計(jì)中，按鈕是用戶與頁(yè)面交互的重要元素之一。而 CSS 按鈕的樣式也是決定網(wǎng)頁(yè)風(fēng)格的重要因素之一。下面我們就來(lái)看一下 CSS 按鈕有哪些風(fēng)格。

/* 第一種風(fēng)格：扁平化按鈕 */
.button-flat {
background-color: #fff;
color: #1abc9c;
border: 2px solid #1abc9c;
border-radius: 3px;
padding: 10px 15px;
font-size: 18px;
}
/* 第二種風(fēng)格：圓角按鈕 */
.button-rounded {
background-color: #e74c3c;
color: #fff;
border-radius: 25px;
padding: 10px 15px;
font-size: 18px;
}
/* 第三種風(fēng)格：圖標(biāo)按鈕 */
.button-icon {
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 15px;
font-size: 18px;
}
.button-icon img {
width: 20px;
height: 20px;
margin-right: 10px;
}
/* 第四種風(fēng)格：漸變按鈕 */
.button-gradient {
background: #1abc9c; 
background: -webkit-linear-gradient(left, #1abc9c, #16a085); 
background: linear-gradient(to right, #1abc9c, #16a085);
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 15px;
font-size: 18px;
}

以上是四種常見的 CSS 按鈕風(fēng)格，它們分別是扁平化按鈕、圓角按鈕、圖標(biāo)按鈕和漸變按鈕。不同的風(fēng)格會(huì)給用戶不同的視覺體驗(yàn)，根據(jù)不同的需求可以選擇不同的風(fēng)格。