Botones de esquinas redondeadas con CSS

Botones de esquinas redondeadas con CSS

En este artículo, aprenderás cómo crear botones con bordes redondeados utilizando CSS. Los botones redondeados se han vuelto populares en los últimos tiempos porque les da un aspecto moderno y atractivo a los sitios web. Después de seguir las instrucciones de este artículo, podrás crear tus propios botones personalizados de forma sencilla.

📋 Aquí podrás encontrar✍
  1. CSS Rounded Corner Buttons
    1. Cómo hacer botones con esquinas redondeadas en forma de píldora
    2. Cómo hacer botones con bordes en gradiente
    3. Ejemplos de código para botones con esquinas redondeadas en diferentes formas
  2. Conclusión
  3. Preguntas frecuentes
    1. ¿Cómo crear un botón con esquinas redondeadas en HTML?
    2. ¿Cómo hacer que los bordes de un botón sean transparentes?
    3. ¿Cómo crear un botón con esquinas redondeadas en forma de bocadillo?
    4. ¿Cómo crear diferentes tipos de bordes para botones con esquinas redondeadas?

CSS Rounded Corner Buttons

CSS te permite crear fácilmente botones de esquinas redondeadas. Es necesario utilizar la propiedad de borde y la propiedad border-radius.

Borde: esta propiedad se utiliza para establecer el grosor del borde de un elemento y su tipo.

Border-radius: esta propiedad se utiliza para establecer el radio de las esquinas de los elementos.

Por ejemplo, el siguiente código CSS creará un botón redondeado con un radio de esquina de 5px y un borde sólido de 1px de ancho:


.botón{
border: 1px solid #999;
border-radius: 5px;
}

Si quieres utilizar un fondo de color, usa la propiedad de fondo CSS. Por ejemplo, este código creará un botón con un fondo rojo y esquinas redondeadas:


.botón{
background-color: red;
border-radius: 5px;
}

Cómo hacer botones con esquinas redondeadas en forma de píldora

Los botones de esquinas redondeadas también se pueden crear en forma de píldora. Para ello es necesario establecer el radio de las esquinas a la mitad del alto del botón.

Este es un ejemplo de código para un botón con esquinas redondeadas en forma de píldora:


.botón{
background-color: blue;
border-radius: 20px;
height: 40px;
width: 80px;
}

Cómo hacer botones con bordes en gradiente

Utilizando la propiedad de fondo gradiente CSS, se puede crear un botón con bordes en gradientes. Puedes utilizar un fondo de gradiente en donde los bordes del botón se fundan en un degradado.

Este es un ejemplo de código para un botón con bordes en gradiente:


.botón{
background-image: linear-gradient(to bottom, #ccc, #fff);
border: 1px solid #999;
border-radius: 5px;
}

Ejemplos de código para botones con esquinas redondeadas en diferentes formas

Aquí te dejamos algunos ejemplos de código que puedes utilizar para crear diferentes tipos de botones con esquinas redondeadas:


/* Botón con forma de píldora */
.botón{
background-color: blue;
border-radius: 20px;
height: 40px;
width: 80px;
}

/* Botón con borde en gradiente */
.botón{
background-image: linear-gradient(to bottom, #ccc, #fff);
border: 1px solid #999;
border-radius: 5px;
}

/* Botón con esquinas redondas en forma de bocadillo */
.botón{
background-color: orange;
border-radius: 0 0 30px 30px;
padding: 20px;
width: 200px;
}

/* Botón con esquinas redondas invertidas */
.botón{
background-color: green;
border-radius: 30px 30px 0 0;
height: 50px;
width: 150px;
}

Conclusión

Los botones con esquinas redondeadas pueden darle un aspecto moderno y atractivo a tu sitio web. Ahora que has aprendido a crear botones de esquinas redondeadas, puedes experimentar con diferentes formas, bordes y fondos para personalizar tus botones. También puedes utilizar los ejemplos de código que se presentaron en este artículo para crear tus propios botones personalizados.

Preguntas frecuentes

¿Cómo crear un botón con esquinas redondeadas en HTML?

Para crear un botón con esquinas redondeadas en HTML, debes utilizar la etiqueta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir