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.
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:
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.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
