Cómo hacer un botón redondo en CSS

En este tutorial te vamos a mostrar cómo hacer un botón redondo con CSS. Esto es muy sencillo y al final del tutorial podrás hacer que tus botones en HTML se vean como un círculo.

Cómo hacer un botón redondo con CSS?

Paso 1: Definir un botón en HTML

El primer paso siempre es el más sencillo y directo. Así que definimos la estructura de un botón simple con HTML, y le ponemos una clase para poder asignarle estilos con CSS más adelante.

<button class="redondo">
Ok!
</button>

Paso 2: Convertirlo en un botón cuadrado

Para que nuestro botón sea un círculo, vamos a necesita que el botón se vea inicialmente como un cuadrado. Es decir vamos a hacer que el ancho y altura tengan una misma medida. En este caso estamos colocando 50px.

.redondo{
  display: block;
  width: 50px;
  height: 50px;
}

Paso 3: Colocar un radio de borde de 50% con CSS

Ahora, vamos a hacer que nuestro cuadrado tenga los bordes redondeados. Con un radio de borde de 50%, lograremos que el botón se vea totalmente redondo.

.redondo{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

¿Por qué un radio de borde 50%?

La propiedad de CSS ‘border-radius’ le otorga a cada esquina un radio específico de borde. Si usamos el valor ‘50%’, estamos indicando que el borde de radio sea 50% del ancho/altura de nuestro elemento. En el ejemplo, el resultado sería el mismo si colocamos ‘50%’ que ’25px’. Se usa 50% porque aplica a cualquier tamaño de elemento.

A continuación se muestra un diagrama de ejemplo para entender cómo funciona el ‘border-radius’ en elementos:

Radio de borde 50% para que el botón se vea redondo.

Recuerda que se está colocando 50% de radio a todas las esquinas del botón. Por eso el efecto final es que el cuadrado se convierte en un círculo.


Resultado: Botón redondo con CSS

El resultado final es un botón redondo, como el siguiente:

Si lo desean, pueden ir variando con CSS los colores y más. Cuéntanos si tienes algun problema o pregunta. Recuerda que esto mismo se puede aplicar a más elementos, no solo botones.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.