Créer un bouton circulaire en CSS

Cet article présentera une méthode pour créer un bouton cercle en CSS.

Utilisez la propriété border-radius pour créer un bouton circulaire en CSS

On peut utiliser la propriété border-radius pour créer un bouton cercle en CSS. La propriété crée les coins arrondis de l’élément sélectionné en ajoutant le rayon aux coins de l’élément.

La propriété border-radius prend une à quatre valeurs en option. Nous examinerons les exemples ci-dessous.

Dans border-radius avec quatre valeurs, la valeur initiale s’applique au coin supérieur gauche, la seconde s’applique au coin supérieur droit, la troisième valeur au coin inférieur droit et la valeur finale au coin inférieur. coin gauche.

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

Pour trois valeurs, la valeur initiale s’applique au coin supérieur gauche, la deuxième valeur s’applique aux coins supérieur droit et inférieur gauche et la valeur finale s’applique au coin inférieur droit.

border-radius: 12px 50px 20px

La valeur initiale s’applique aux coins supérieur gauche et inférieur droit dans les deux valeurs, et la dernière s’applique aux coins supérieur droit et inférieur gauche.

border-radius: 12px 50px

Lorsqu’un seul rayon est défini, il crée un coin circulaire car il s’applique à tous les coins de l’élément.

border-radius: 12px

Nous pouvons utiliser la propriété border-radius pour créer un bouton circulaire parfait en fournissant le border-radius comme exactement la moitié de la hauteur et de la largeur du bouton. On peut utiliser une seule valeur, border-radius, pour la démonstration.

Par exemple, créez un bouton en utilisant la balise button en HTML. Écrivez le texte Cliquez ici à l’intérieur du bouton.

Maintenant en CSS, sélectionnez le bouton et spécifiez la height et la width du bouton à 200px. Ensuite, spécifiez le border-radius comme 50% ou 100px.

Le 100px border-radius que nous avons saisi correspond à la moitié de la hauteur et de la largeur du bouton. En conséquence, chaque coin du bouton formera un coin arrondi avec la moitié du rayon de la longueur de ses côtés.

Nous pouvons utiliser la valeur 50% pour border-radius pour le simplifier. Ainsi, nous avons construit un bouton rond en utilisant la propriété border-radius de CSS.

Exemple de code :

<button> Click here </button>

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

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