Crear botón de círculo en CSS

Este artículo presentará un método para crear un botón circular en CSS.

Use la propiedad border-radius para crear un botón circular en CSS

Podemos usar la propiedad border-radius para crear un botón circular en CSS. La propiedad crea las esquinas redondeadas del elemento seleccionado agregando el radio a las esquinas del elemento.

La propiedad border-radius toma de uno a cuatro valores como opciones. Veremos los ejemplos a continuación.

En border-radius con cuatro valores, el valor inicial se aplica a la esquina superior izquierda, el segundo se aplica a la esquina superior derecha, el tercer valor a la esquina inferior derecha y el valor final a la esquina inferior. esquina izquierda.

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

Para tres valores, el valor inicial se aplica a la esquina superior izquierda, el segundo valor se aplica a las esquinas superior derecha e inferior izquierda y el valor final se aplica a la esquina inferior derecha.

border-radius: 12px 50px 20px

El valor inicial se aplica a las esquinas superior izquierda e inferior derecha en los dos valores, y el último se aplica a las esquinas superior derecha e inferior izquierda.

border-radius: 12px 50px

Cuando se establece un solo radio, forma una esquina circular, ya que se aplica a todas las esquinas del elemento.

border-radius: 12px

Podemos usar la propiedad border-radius para crear un botón circular perfecto proporcionando el border-radius como exactamente la mitad de la altura y el ancho del botón. Podemos usar un solo valor, border-radius, para la demostración.

Por ejemplo, cree un botón usando la etiqueta button en HTML. Escriba el texto Haga clic aquí dentro del botón.

Ahora en CSS, seleccione el botón y especifique la height y el width del botón a 200px. Luego, especifique el border-radius como 50% o 100px.

El 100px border-radius que ingresamos es la mitad de la altura y el ancho del botón. Como resultado, cada esquina del botón formará una esquina redondeada con la mitad del radio de la longitud de sus lados.

Podemos usar el valor 50% para border-radius para simplificarlo. Por lo tanto, construimos un botón de círculo usando la propiedad border-radius de CSS.

Código de ejemplo:

<button> Click here </button>

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

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