CSS3和icon圖標(biāo)都是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的元素。當(dāng)兩者結(jié)合起來(lái)，可以為網(wǎng)頁(yè)添加更多的美感和交互效果。

.icon_button {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background-color: #eee;
}
.icon_button i {
margin-right: 10px;
}
.icon_button:hover {
background-color: #ccc;
}

上面是一個(gè)簡(jiǎn)單的CSS樣式，可以將一個(gè)基本的按鈕轉(zhuǎn)換為一個(gè)含有圖標(biāo)的按鈕，具有懸停效果。我們可以使用預(yù)先定義的ico圖標(biāo)，也可以使用自定義圖標(biāo)。

<button class="icon_button">
<i class="ico-refresh"></i>
刷新
</button>

上面的代碼創(chuàng)建了一個(gè)名為icon_button的按鈕，其中包含一個(gè)名為ico-refresh的圖標(biāo)和文本“刷新”。當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，背景色變?yōu)榛疑?/p>

這是一個(gè)簡(jiǎn)單的例子，但它展示了如何使用CSS3和icon圖標(biāo)來(lái)改善網(wǎng)頁(yè)設(shè)計(jì)。我們可以使用更多的樣式和圖標(biāo)來(lái)創(chuàng)建各種各樣的按鈕，以及更加復(fù)雜的UI組件。