CSS圓盤按鈕布局是一種流行的網站設計風格，它可以使網站看起來更加現代化和時尚。下面我們來看一下怎樣使用CSS實現圓盤按鈕布局。

HTML代碼
<div class="circle">
<a href="#"><span>按鈕1</span></a>
<a href="#"><span>按鈕2</span></a>
<a href="#"><span>按鈕3</span></a>
<a href="#"><span>按鈕4</span></a>
<a href="#"><span>按鈕5</span></a>
</div>
CSS代碼
.circle {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
border-radius: 50%;
background-color: #333;
box-shadow: 0px 0px 5px #333;
}
.circle a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
color: #fff;
border-radius: 50%;
transition: all 0.3s ease;
}
.circle a:hover {
background-color: #fff;
color: #333;
}
.circle a:nth-child(1) {
transform: rotate(72deg) translate(0, -100px) rotate(-72deg);
background-color: #0077FF;
}
.circle a:nth-child(2) {
transform: rotate(144deg) translate(0, -100px) rotate(-144deg);
background-color: #00C853;
}
.circle a:nth-child(3) {
transform: rotate(216deg) translate(0, -100px) rotate(-216deg);
background-color: #FF5722;
}
.circle a:nth-child(4) {
transform: rotate(288deg) translate(0, -100px) rotate(-288deg);
background-color: #B71C1C;
}
.circle a:nth-child(5) {
transform: rotate(360deg) translate(0, -100px) rotate(-360deg);
background-color: #FBC02D;
}

在上面的代碼中，我們首先創建了一個class為circle的div元素，并設置了其寬度、高度、背景顏色、邊框圓角和陰影等屬性，使其看起來像一個圓盤。然后，我們在圓盤中央添加了5個鏈接元素，每個元素都設置了一個半徑為100px的圓形位置并進行絕對定位。

由于每個按鈕都具有相同的寬度和高度，因此可以使用nth-child（）選擇器對它們進行旋轉和顏色設置。 我們使用rotate（）方法和translate（）方法將每個按鈕放置在圓形的正確位置。

當用戶將鼠標懸停在任何按鈕上時，通過:hover偽類，我們可以很容易地將背景顏色和文本顏色顛倒，使圓盤按鈕看起來更具交互性。

總體來說，圓盤按鈕布局是一種簡單而直觀的設計，對導航很有用。 由于其獨特的形狀和現代感，它很好地適用于手機應用程序和網站，使其成為現代網站設計的重要元素之一。