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. Los campos requeridos están marcados *


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