CSS 中有一種很常見的按鈕形狀，就是兩邊是半圓的按鈕，常常在網頁中應用。今天我們就來看看如何用 CSS 制作這種按鈕。

.btn {
display: inline-block;
padding: 12px 24px;
background-color: #123456;
color: white;
font-weight: bold;
border: none;
border-radius: 20px;
}
.btn::before,
.btn::after {
display: inline-block;
content: "";
width: 20px;
height: 100%;
border-radius: 50%;
background-color: #123456;
}
.btn::before {
margin-right: -10px;
}
.btn::after {
margin-left: -10px;
}

上面的代碼實現了一個名為 btn 的按鈕樣式，具體解釋如下：

首先是樣式基本設置：

.btn {
display: inline-block; /* 讓按鈕成為行內塊級元素，可以設置寬高 */
padding: 12px 24px; /* 按鈕內邊距 */
background-color: #123456; /* 背景色 */
color: white; /* 文字顏色 */
font-weight: bold; /* 文字加粗 */
border: none; /* 去掉邊框 */
border-radius: 20px; /* 圓角半徑，這里設置 20px */
}

接著是生成兩個半圓的代碼：

.btn::before,
.btn::after {
display: inline-block; /* 讓偽元素變成行內塊級元素 */
content: ""; /* 必須設置 */
width: 20px; /* 半圓直徑 */
height: 100%; /* 半圓高度 */
border-radius: 50%; /* 圓形 */
background-color: #123456; /* 背景色與按鈕一致 */
}
.btn::before {
margin-right: -10px; /* 負邊距使半圓向左移動一半 */
}
.btn::after {
margin-left: -10px; /* 負邊距使半圓向右移動一半 */
}

由于 before 和 after 的寬度和高度都和按鈕相同，所以它們剛好可以和按鈕對齊。再加上負邊距的處理，就形成了兩個半圓。

以上就是制作 CSS 兩邊半圓按鈕的全部代碼和解釋。