在設(shè)計(jì)網(wǎng)站界面時(shí)，按鈕是非常常見的元素，但是為了增加用戶體驗(yàn)，很多網(wǎng)站都會(huì)在按鈕旁邊添加一些圖標(biāo)來說明按鈕的功能，這些圖標(biāo)通常使用css來實(shí)現(xiàn)。下面我們來看看如何在css按鈕隔壁添加圖標(biāo)。

.btn {
position: relative;
display: inline-block;
padding: 0.5em 1em;
background-color: #007bff;
color: #fff;
font-size: 1rem;
text-align: center;
}
.btn:before {
position: absolute;
content: "";
width: 16px;
height: 16px;
left: -18px;
top: 50%;
transform: translateY(-50%);
background-image: url("icon.png");
background-size: cover;
}
.btn:hover:before{
opacity: 0.8;
}

代碼層面，我們先定義了一個(gè).btn類作為按鈕的樣式，隨后我們使用.btn:before偽元素來添加前置圖標(biāo)。在:before中，我們將圖標(biāo)的位置設(shè)置為相對(duì)于按鈕的位置左側(cè)18px，垂直居中并且設(shè)置圖標(biāo)的背景圖片。在:hover:before中，我們設(shè)置按鈕的前置圖標(biāo)在鼠標(biāo)懸停時(shí)透明度為0.8，以增加用戶體驗(yàn)。

需要注意的是，在使用:before時(shí)，我們還需要為按鈕設(shè)置position: relative，這樣:before才能相對(duì)于按鈕進(jìn)行定位。

總的來說，使用css在按鈕隔壁添加圖標(biāo)可以讓網(wǎng)站界面更加美觀和實(shí)用，但是在使用時(shí)需要注意樣式的層級(jí)關(guān)系并且選擇合適的圖標(biāo)，以達(dá)到良好的用戶體驗(yàn)效果。