CSS和圖標庫是網頁設計中常用的技術。CSS是一種用于描述網頁的樣式和外觀的語言，而圖標庫則是一組經過優化的圖標資源，可用于增強網頁的功能和美感。下面我們來看看如何使用CSS和圖標庫制作一款優美的網站。

.icon {
font-size: 24px;
color: #333;
margin-right: 10px;
}
.btn {
display: inline-block;
background-color: #2ecc71;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #27ae60;
}

首先要引用一個圖標庫，比如Font Awesome。在HTML文件頭部添加以下代碼：

<link rel="stylesheet" >

然后就可以在網頁中使用圖標了。我們可以為圖標定義一個CSS類，比如.icon，其中font-size屬性控制圖標大小，color屬性為圖標顏色，margin-right屬性為圖標與其他元素之間的距離。

接下來，我們可以定義一個按鈕，使用.btn類名。按鈕的基本樣式包括背景色，字體顏色，邊框圓角，字母大寫和加粗等。按鈕在鼠標懸停時會有一個顏色的過渡效果。

最后，我們可以在HTML中使用按鈕和圖標：

<a href="#" class="btn"><i class="far fa-envelope icon"></i>Contact Us</a>

這樣就可以創建一個帶圖標的按鈕，并為其添加懸停效果。在實際網站設計中，我們可以使用更多的CSS屬性和圖標庫資源，讓網站更加美觀和用戶友好。