Borde del botón CSS
Ejemplo 01: Uso de CSS para darle a un botón un borde sólido en un archivo HTML
En este ejemplo, utilizaremos una etiqueta de estilo CSS para modificar un botón en un archivo HTML. Agregaremos un borde sólido al botón predeterminado que no tiene un límite para resaltarlo desde el fondo y el resto de la página.
Abrimos la etiqueta de estilo y comenzamos un parámetro de botón para el estilo. En esto, le dimos al botón un color de fondo usando el código de referencia HTML. Luego le dimos al botón un borde al escribirlo como una palabra clave y le dimos tres propiedades: el tamaño del borde del botón, el estado del borde y luego el color del borde. Luego, en el estilo, le dimos al botón un poco de relleno, alineación de texto y propiedades de visualización para que el botón sea ajustable al navegador y más visible.
Luego, cerramos el estilo y la etiqueta de la cabeza y nos movimos a la etiqueta del cuerpo. En esta etiqueta, le hemos dado un encabezado a nuestra página HTML usando la etiqueta H1 y luego abrimos la etiqueta del botón. Después de esto, cerraremos ambas etiquetas y guardaremos este script en el ".formato HTML "para abrirlo en nuestro navegador.
Después de ejecutar el script en nuestro navegador, obtendremos la salida anterior. La salida anterior muestra que el botón tiene el estilo tal como lo especificamos en la etiqueta de estilo en el encabezado del archivo.
Ejemplo 02: Uso de CSS para dar un borde punteado a un botón en un archivo HTML
En este ejemplo, agregaremos un borde punteado al botón predeterminado, que no tiene borde, para distinguirlo del fondo y el resto de la página. El script se desarrollará en Notepad ++ y usará una etiqueta de estilo CSS para modificar un botón en un archivo HTML.
Abrimos la etiqueta de estilo y comenzamos a personalizar el parámetro del botón. Utilizamos el código de referencia HTML para dar el color de fondo del botón. Luego, le dimos al botón un borde escribiéndolo como una palabra clave y dándole tres propiedades: "4px", que es el tamaño del borde; "Punteado", que es la forma de la frontera; y "negro", que es el color del borde.
Luego, agregamos relleno, alineación de texto, configuración de visualización y tamaño de fuente al botón para que sea más ajustable y notable del navegador y notable. El estilo y las etiquetas de la cabeza se cerraron. El siguiente es la etiqueta del cuerpo. Usamos la etiqueta H1 para proporcionar un encabezado de nuestra página HTML y luego abrimos la etiqueta del botón en la etiqueta del cuerpo. Escribimos algún texto que aparecerá en el botón en esta etiqueta. Después de eso, cerraremos ambas etiquetas y guardaremos este script en ".formato HTML "para que podamos ejecutarlo en nuestro navegador.
Obtendremos la salida anterior después de ejecutar el script en nuestro navegador. El fragmento muestra que el botón tiene un borde de puntos negros como se define en la etiqueta de estilo en el encabezado del archivo.
Ejemplo 03: Uso de CSS para darle a un botón un borde sólido de bordes redondos en un archivo HTML
En este ejemplo, usaremos etiquetas de estilo CSS para cambiar la apariencia de un botón en un archivo HTML. Crearemos un borde sólido con esquinas redondas y algo de color para distinguir el botón predeterminado desde el primer plano y el resto de la página.
Abrimos la etiqueta de estilo en el script anterior y comenzamos a modificar un parámetro de botón en el encabezado del archivo html. Luego, le dimos al botón un borde al escribirlo como una palabra clave y asignándola tres propiedades: "4px", que es el tamaño del borde; "Sólido", que es la forma del borde; y "negro", que es el color del borde. Luego, agregamos otra propiedad fronteriza llamada Border-Radius y su valor se asigna en píxeles para redondear los bordes de la frontera. Luego cerramos el estilo y las etiquetas de la cabeza antes de pasar a la etiqueta del cuerpo. Escribimos algún texto entre las etiquetas del botón que aparecerán en el botón.
Como muestra la salida anterior, el borde del botón tiene bordes redondeados y todos los demás estilo que definimos en el encabezado del archivo.
Ejemplo 04: Uso de CSS en línea para agregar un borde a un botón en un archivo HTML
En este ejemplo, utilizaremos el estilo CSS en línea en un botón para darle un borde en un archivo HTML. Todo el estilo que se realizará en el botón se daría dentro de la etiqueta del botón.
En el script anterior, haremos todo el estilo en el cuerpo del archivo. Primero, abriremos la etiqueta H1 para dar un rumbo a la página. Entonces, abriremos la etiqueta del botón. En esta etiqueta, definiremos el estilo del botón. Iniciaremos el estilo con la palabra clave del borde y comenzaremos a darle diferentes propiedades como tamaño, forma, color, relleno y alineación. Después de esto, cerramos la etiqueta y escribimos el texto que aparecerá en el botón. Luego, cerramos todas las etiquetas y ejecutamos este archivo para obtener la siguiente salida:
Como podemos ver en la salida, el botón tiene todo el estilo que proporcionamos en la etiqueta del botón y hemos agregado con éxito un borde a un botón usando CSS en línea.
Ejemplo 05: Uso de CSS para dar un borde doble a un botón en un archivo HTML
Agregaremos un border doble a un botón en este ejemplo. El script se desarrollará en Notepad ++ y usará un método de etiqueta de estilo CSS para modificar un botón en un archivo HTML.
Abrimos la etiqueta de estilo y comenzamos a alterar un elemento de botón en el encabezado del archivo HTML. Luego, el borde se agregó al botón escribiéndolo como una palabra clave y asignándola tres propiedades: "10px", el tamaño del borde; "Doble", la forma del borde; y "negro", el color del borde.
El botón tiene todos los estilos de la etiqueta de estilo y hemos aplicado con éxito un borde a un botón usando CSS.
Conclusión
En este artículo, discutimos el borde de un botón usando CSS en un archivo HTML. El botón predeterminado de un navegador generalmente no tiene estilo y es solo un simple cuadrado blanco. Entonces, usamos CSS para diseñar este elemento y hacer que sea adaptable a la página HTML. En este artículo, discutimos diferentes ejemplos en los que agregamos un borde a un botón mediante el uso de diferentes enfoques, y todos estos ejemplos se implementaron en el bloc de notas++.