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✍
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
¿Cómo hacer que los bordes de un botón sean transparentes?
Para hacer que los bordes de un botón sean transparentes, debes utilizar la propiedad de borde con un valor de 0.
¿Cómo crear un botón con esquinas redondeadas en forma de bocadillo?
Para crear un botón con esquinas redondeadas en forma de bocadillo, debes utilizar la propiedad de radio de esquinas junto con la propiedad de relleno para determinar el tamaño del botón.
¿Cómo crear diferentes tipos de bordes para botones con esquinas redondeadas?
Para crear diferentes tipos de bordes para botones con esquinas redondeadas, debes utilizar la propiedad de borde junto con diferentes valores para determinar el grosor del borde, el tipo y los colores.
¡Atrévete a experimentar con diferentes estilos y formas para crear botones únicos y personalizados para tu sitio web!
¿Qué es toFixed() en JavaScript?
Cómo resetear una laptop Gateway sin encenderla
25 Ejemplos de Logging en Python
Subir
Deja una respuesta