CSS帶箭頭的按鈕越來越流行，讓網(wǎng)頁看起來更時尚、更現(xiàn)代化。本文將介紹如何用CSS制作帶箭頭的按鈕。

/* 樣式表 */
.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
background: #3f51b5;
color: #fff;
border-radius: 5px;
text-align: center;
}
.btn::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 10px solid #3f51b5;
}
.btn:hover::before {
border-right-color: #fff;
}

首先，我們需要給按鈕添加一個相對定位，并設置內(nèi)邊距、背景顏色和文本顏色。

.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
background: #3f51b5;
color: #fff;
border-radius: 5px;
text-align: center;
}

然后，我們可以通過偽元素::before添加一個三角形。這個三角形的大小可以通過邊框的寬度來控制。我們需要將三角形相對定位，并將其位置移到按鈕的左側(cè)。我們還需要設置三角形的邊框顏色，以及使其上下邊框透明，使得只有右邊框呈現(xiàn)三角形的形狀。

.btn::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 10px solid #3f51b5;
}

最后，當鼠標懸停在按鈕上時，我們可以通過偽元素::before來改變?nèi)切蔚念伾＿@可以通過給border-right-color設置不同的值來實現(xiàn)。

.btn:hover::before {
border-right-color: #fff;
}

現(xiàn)在，我們的帶箭頭的按鈕就完成了。您可以通過將.btn類應用于標簽或標簽來應用這個按鈕樣式。