CSS頁面圓盤組合按鈕是一種很實用的設計元素，可以提高網站的用戶體驗和交互性。下面我們將介紹如何使用CSS實現圓盤組合按鈕。

.circle-btn {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transition: all 0.3s ease;
}
.circle-btn:hover {
transform: scale(1.1);
border: 2px solid #666;
}
.circle-btn .btn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: #666;
color: #fff;
font-size: 20px;
font-weight: bold;
transition: all 0.3s ease;
}
.circle-btn .btn:hover {
background-color: #333;
}
.circle-btn .btn-top {
left: 25%;
top: 0%;
}
.circle-btn .btn-bottom {
left: 25%;
bottom: 0%;
}
.circle-btn .btn-left {
left: 0%;
top: 25%;
}
.circle-btn .btn-right {
right: 0%;
top: 25%;
}

代碼中，我們首先定義了.circle-btn類，使用position屬性設置按鈕為相對定位，并定義了寬高、圓角和背景顏色等屬性。同時，我們也設置了鼠標懸停時的樣式和過渡效果。然后，我們添加了.btn類作為子元素，使用position屬性設置按鈕為絕對定位，并使用flex布局將其水平、垂直居中。我們還設置了寬高、圓角、背景顏色和字體樣式等屬性，并定義了鼠標懸停時的樣式和過渡效果。最后，根據按鈕的位置分別設置了.btn-top、.btn-bottom、.btn-left和.btn-right四個類。

通過組合以上代碼，我們可以實現一個圓盤組合按鈕，用戶可以通過點擊不同的按鈕來觸發不同的功能。