CSS帶圖標的按鈕是實現網頁美化和交互的一種方式，同時也是提高網頁可用性的一種方法。以下是一些關于CSS帶圖標的按鈕的樣式技巧。

.btn {
display: inline-block;
padding: 10px 15px;
background-color: #428bca;
color: #fff;
border: 2px solid #428bca;
border-radius: 4px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-weight: bold;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.btn:hover {
background-color: #0054a6;
border: 2px solid #0054a6;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}
.btn-icon {
position: relative;
padding-left: 40px;
}
.icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.btn-icon:hover .icon {
color: #ffcc00;
}

在上面的代碼中，我們使用了.btn樣式來設置按鈕的基本樣式，包括背景顏色、邊框、圓角等。而.btn-icon樣式則是用來處理帶圖標的按鈕。首先，我們給按鈕設置了一個position為relative的屬性，使得按鈕和圖標在一個相對較小的區域內工作。然后，我們設置了按鈕的padding-left屬性為40像素，讓圖標有足夠的空間來呈現。在.icon樣式中，我們使用position為absolute將圖標定位到按鈕的左側，并使用transform屬性使其垂直水平居中。最后，我們使用:hover偽類來設置圖標在鼠標懸停時的樣式。

當然，這只是CSS帶圖標按鈕的一種簡單實現方式。因此在實際使用中，應該根據需要進行靈活的樣式調整。必要時，還可以使用CSS預處理器如Sass和Less來減少樣式代碼的重復。