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.

Publicidad


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.


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.

¿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

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.



También te interesaría...

Suscríbete a nuestra lista de correo

Etiquetas:,

Publicidad

Deje un comentario