CSS でサークルボタンを作成

この記事では、CSS でサークルボタンを作成する方法を紹介します。

CSS で円形ボタンを作成するには border-radius プロパティを使用する

border-radius プロパティを使用して、CSS で円ボタンを作成できます。プロパティは、要素の角に半径を追加することにより、選択した要素に丸みを帯びた角を作成します。

border-radius プロパティは、オプションとして 1〜4 個の値を取ります。以下の例を見ていきます。

4つの値を持つ border-radius では、初期値は左上隅に適用され、2 番目の値は右上隅に適用され、3 番目の値は右下隅に適用され、最後の値は下隅に適用されます-左の角。

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

3つの値の場合、初期値は左上隅に適用され、2 番目の値は右上隅と左下隅に適用され、最終値は右下隅に適用されます。

border-radius: 12px 50px 20px

初期値は 2つの値の左上隅と右下隅に適用され、後者は右上隅と左下隅に適用されます。

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%;
}