在 CSS 中建立圓形按鈕

本文將介紹一種在 CSS 中建立圓形按鈕的方法。

在 CSS 中使用 border-radius 屬性建立圓形按鈕

我們可以使用 border-radius 屬性在 CSS 中建立一個圓形按鈕。該屬性通過將半徑新增到元素的角來為選定元素建立圓角。

border-radius 屬性採用一到四個值作為選項。我們將研究下面的例子。

border-radius 有四個值，初始值適用於左上角，第二個適用於右上角，第三個值適用於右下角，最終值適用於底部-左角。

border-radius: 12px 50px 20px 5px

對於三個值，初始值應用於左上角，第二個值應用於右上角和左下角，最終值應用於右下角。

border-radius: 12px 50px 20px

初始值適用於兩個值中的左上角和右下角，後者適用於右上角和左下角。

border-radius: 12px 50px

當設定單個半徑時，它會形成一個圓角，因為它適用於元素的所有角。

border-radius: 12px

我們可以使用 border-radius 屬性來建立一個完美的圓形按鈕，方法是將 border-radius 提供為按鈕高度和寬度的一半。我們可以使用一個值 border-radius 來進行演示。

例如，使用 HTML 中的 button 標籤建立一個按鈕。在按鈕內寫下文字點選這裡。

現在在 CSS 中，選擇按鈕並將按鈕的 height 和 width 指定為 200px。然後，將 border-radius 指定為 50%或 100px。

我們輸入的 100px``border-radius 是按鈕高度和寬度的一半。結果，按鈕的每個角將形成一個圓角，其邊長半徑的一半。

我們可以使用 border-radius 的 50%值來簡化它。因此，我們使用 CSS 的 border-radius 屬性構建了一個圓形按鈕。

示例程式碼：

<button> Click here </button>

button {
 height: 200px;
 width: 200px;
 border-radius: 100px;
}

button {
 height: 200px;
 width: 200px;
 border-radius: 50%;
}