CSS 四分環(huán)形按鈕是一種常見的 UI 設(shè)計元素，它通常用于網(wǎng)站或應(yīng)用的操作按鈕。該按鈕由一個圓形區(qū)域和四個等分的扇形組成，每個扇形上面有一個圖標或文本，用戶可以通過點擊這些扇形來進行不同的操作。

<div class="button">
<div class="circle left">
<span class="icon"><i class="fa fa-home"></i></span>
<span class="text">Home</span>
</div>
<div class="circle top">
<span class="icon"><i class="fa fa-envelope"></i></span>
<span class="text">Message</span>
</div>
<div class="circle right">
<span class="icon"><i class="fa fa-bell"></i></span>
<span class="text">Notification</span>
</div>
<div class="circle bottom">
<span class="icon"><i class="fa fa-user"></i></span>
<span class="text">Profile</span>
</div>
	</div>

上面的代碼是一個簡單的 CSS 四分環(huán)形按鈕的例子。首先，我們創(chuàng)建一個div元素，并添加一個名為button的 CSS 類。這個元素將作為環(huán)形按鈕的容器。

接下來，我們在div容器內(nèi)添加四個div元素，分別使用名為circle的 CSS 類，并分別定義了left、top、right和bottom四個不同的類。這些類定義了每個元素的位置和旋轉(zhuǎn)角度，使其在環(huán)形中呈現(xiàn)等分的狀態(tài)。

每個circle元素內(nèi)部包含兩個span元素，分別用于顯示圖標和文本。通過調(diào)整font-size屬性和使用 Font Awesome 圖標庫中提供的各種圖標，我們可以輕松地更改文本和圖標的樣式和內(nèi)容。

最后，我們使用 CSS 中的hover偽類來為每個扇形添加懸停樣式，以增強用戶的交互體驗。我們還可以通過添加其他的 CSS 樣式來進一步定制四分環(huán)形按鈕的外觀和功能，以適應(yīng)不同的需求和場景。