Botones de esquina redondeados CSS
Ejemplo 01: Uso de la etiqueta de estilo CSS en un archivo HTML para crear un botón de esquina redondeado
En este ejemplo, utilizaremos el enfoque de etiqueta de estilo CSS para crear un botón de esquina redondeado en un archivo HTML. El elemento de botón predeterminado del lenguaje de marcado de hipertexto se remodelará en un botón con color y bordes redondos en este ejemplo. Echemos un vistazo al script que crearemos para completar esta tarea:
En el script dado, abrimos nuestro encabezado de archivo. En el encabezado del archivo, definimos el estilo del elemento del botón. Para esto, abrimos una etiqueta de estilo y llamamos a la clase de botones donde definimos las varias propiedades de estilo. La primera propiedad sería el radio de borde del botón que crea un borde para el botón con esquinas redondas. Luego, agregamos el color al fondo del botón utilizando la propiedad del color de fondo. Después de esto, definimos el ancho y la altura del botón en píxeles y luego cerramos el estilo y las etiquetas de la cabeza. Ahora, abrimos la etiqueta del cuerpo y nos dirigimos a la página con la ayuda de la etiqueta H1. Luego, abrimos la etiqueta del botón y llamamos a la clase de botón dentro de la etiqueta. Esto heredará todas las propiedades de estilo que se definen en la etiqueta de estilo. Después de esto, cerramos todas las etiquetas y guardamos el archivo para abrirlo en nuestro navegador.
En la salida anterior, podemos ver que el botón tiene esquinas redondeadas debido al estilo CSS que especificamos en la clase de botón. Ahora, alteramos la propiedad de Radius de borde y observamos el cambio en el borde del botón.
Ahora, aumentamos la longitud del píxel del radio del borde en el guión anterior y no hacemos más cambios más que eso. Después de guardar y abrir este archivo, obtendremos la siguiente salida:
Podemos ver que el botón en la salida dada tiene extremos completamente redondos y es diferente de la versión anterior cuando el radio del borde aumentó en el guión.
Ejemplo 02: Uso de CSS en línea para hacer un botón con esquinas redondeadas
En este ejemplo, el enfoque CSS en línea se adoptará para transformar el botón predeterminado dándolo con bordes redondos y agregando un color al fondo. Agregaremos el estilo dentro de la etiqueta del botón en este ejemplo, como se muestra en el siguiente fragmento:
En el script dado, iniciamos nuestro código desde la etiqueta del cuerpo, ya que no hay uso del encabezado del archivo en este escenario. En la etiqueta del cuerpo, agregamos un encabezado primero a la página abriendo la etiqueta H1 y luego pasamos a la etiqueta del botón. En esta etiqueta, escribimos las propiedades de estilo utilizando la palabra clave CSS "estilo". Entre las comas invertidas, las propiedades se asignan, separadas por semicolons. La primera propiedad es el radio fronterizo y su valor es "10px". Luego, asignamos el color del fondo y asignamos la altura y el ancho del botón. Después de esto, cerramos el botón y las etiquetas del cuerpo para finalizar el archivo. Y luego guárdelo en el ".Formato de archivo HTML "para que podamos abrirlo en nuestro navegador.
La salida muestra que transformamos el botón predeterminado dándole un borde redondo y fondo blanco usando el CSS en línea dentro de la etiqueta del botón.
Ejemplo 03: Uso de las diferentes propiedades relacionadas con el radio de borde en CSS en un botón
En este ejemplo, utilizaremos las diferentes propiedades relacionadas con el radio de borde que el CSS proporciona con respecto a la perspectiva de posicionamiento. Discutiremos estas diferentes propiedades e implementaremos en el siguiente script para un archivo HTML:
En el script anterior, agregamos cuatro propiedades diferentes con respecto al radio del borde, que son la parte superior izquierda, superior derecha, abajo a la izquierda e inferior derecha. Todas estas propiedades representan los cuatro lados del borde del botón y CSS nos permite editar cada lado del borde, por separado. Entonces, asignamos el lado izquierdo del borde del botón con valores de radio similares y el lado derecho del borde del botón con valores de radio similares. Esto creará dos formas de borde diferentes en ambos lados del borde del botón. Luego, también agregamos un color al fondo del botón y asignamos un ancho y altura fijos para el elemento del botón. Después de esto, le damos a la página un encabezado en la etiqueta del cuerpo y creamos un botón en la etiqueta del cuerpo también. La etiqueta del botón heredará la clase de etiqueta de estilo que tiene todas las diferentes propiedades de estilo para crear una forma única para el borde del botón.
Después de abrir el archivo de script anterior en nuestro navegador, obtendremos el resultado dado. Como podemos ver, el botón tiene dos estilos diferentes del borde en ambos lados. Esto sucedió porque asignamos los diferentes valores del radio del borde para ambos lados del botón.
Ejemplo 04: Uso de CSS para cambiar las esquinas del borde de un botón cuando se desplazará
En este ejemplo, cambiaremos el borde del botón cuando se desplazará. El enfoque de la etiqueta de estilo CSS seguirá para crear un efecto de desplazamiento en el botón. En este ejemplo, crearemos una clase separada y una función específica que se heredará también para esta clase.
En este script, creamos una clase de estilo en el encabezado del archivo para el elemento del botón. Luego, creamos una nueva función de propiedad para esta clase llamada "Hover". En esta función, establecemos el radio del borde en "10px", lo que resulta en una animación de la transición del borde a una frontera con bordes redondos. Ahora, cerramos el encabezado de la etiqueta después de completar todas las propiedades relacionadas con el estilo. En la etiqueta del cuerpo, creamos un encabezado usando la etiqueta H1 y abrimos una etiqueta de botón también. En esta etiqueta de botón, usamos la clase de botón desde el encabezado del archivo para heredar todas las propiedades de formato. Después de guardar el archivo, lo abrimos en nuestro navegador.
La salida muestra el efecto posterior en el botón tal como se definió en la clase de estilo y su función.
Conclusión
En este artículo, discutimos los diversos enfoques para crear un botón con esquinas redondeadas utilizando los diferentes estilos CSS que son el CSS en línea y la etiqueta de estilo CSS. Observamos las diferentes propiedades relacionadas con este fenómeno en este artículo. E implementó estas variaciones en el bloc de notas ++ para comprender una mejor comprensión de este concepto.