Tamaño del botón CSS
Ejemplo 01:
En este ejemplo, utilizaremos la propiedad de ancho y altura para el elemento del botón para aumentar su tamaño. Usaremos el enfoque de etiqueta de estilo CSS en este ejemplo para agregar varias propiedades. Primero, analizaremos el tamaño predeterminado del elemento de botón presente en un archivo HTML.
Como podemos ver en el script dado, no hemos alterado el tamaño del botón. En la siguiente salida, podemos ver que el tamaño del botón es muy pequeño y no es factible para una página web.
Entonces, ahora agregamos el estilo al botón. Primero, abrimos la etiqueta de la cabeza para el archivo. En esta etiqueta, la etiqueta de estilo para CSS se llama. En esta etiqueta, agregamos todas las propiedades para el elemento del botón. Escribimos todas las propiedades para el elemento de botón dentro del paréntesis de la clase de botón. Primero, establecemos el color de fondo en "amarillo". Luego, establecemos el ancho en formato de píxel en "100px". Finalmente, establecemos la altura en formato de píxel en "30px". Cerramos el estilo y las etiquetas de la cabeza después de que todo el formato esté completo. Entonces, vamos a la etiqueta del cuerpo. Escribimos el titular de la página usando la etiqueta H1 en la etiqueta del cuerpo y luego abrimos la etiqueta del botón. La clase de la etiqueta de estilo se llama en la etiqueta del botón. Después de eso, cerramos la etiqueta del botón con el texto que se muestra en el botón intermedio, así como la etiqueta del cuerpo.
Como se explicó anteriormente, agregamos el código en el script anterior. Ahora, abrimos este nuevo script en nuestro navegador después de guardarlo en el formato correcto.
En la salida dada, podemos ver que el botón tiene todo el formato, incluido el tamaño que especificamos en la clase de estilo en el encabezado del archivo.
Ejemplo 02: Uso de CSS en línea para alterar el tamaño de un botón en un archivo HTML
En este ejemplo, utilizaremos el CSS en línea para cambiar el tamaño del elemento de botón predeterminado de un archivo HTML. Todas las propiedades de estilo se asignarán dentro de la etiqueta del botón. Este es un método poco convencional para agregar CSS a cualquier elemento y solo se asociará con el elemento actual.
Como podemos ver en el fragmento anterior, nos movimos directamente al cuerpo del archivo, ya que todo el contenido estaría en la etiqueta del cuerpo. Primero, abrimos la etiqueta H1 para escribir un encabezado para la página y luego cerrarla. Luego, abrimos la etiqueta del botón. En esta etiqueta, llamamos el atributo de estilo por su palabra clave. Después de esto, escribimos todas las propiedades para el elemento del botón en las comas invertidas y las separamos usando el carácter de semicolon. Primero, asignamos el color de fondo, "amarillo". Luego, asignamos el ancho en el formato de píxel. Al final, asignamos la altura, también en el formato de píxel. Después de esto, cerramos la etiqueta del botón con el texto intermedio, que aparecerá en el botón. Y cierre la etiqueta del cuerpo junto con ella. Ahora, guardamos este archivo en el ".Formato HTML "y ábralo en nuestro navegador para obtener el siguiente resultado:
Como podemos ver en la salida de nuestro script, el encabezado y el botón de la etiqueta del cuerpo son visibles. El botón tiene todos los valores definidos en la etiqueta, incluida la altura y el ancho.
Ejemplo 03: Aumento del tamaño de un botón cuando se cierne con nuestro cursor en un archivo HTML
En este ejemplo, usaremos las propiedades de ancho y altura del elemento del botón para hacerlo más grande, solo cuando el puntero esté sobre él. En este ejemplo, usaremos las etiquetas de estilo CSS para agregar numerosos atributos y efectos al elemento del botón.
En este ejemplo, personalizamos el botón usando las etiquetas de estilo CSS. Primero, abrimos la etiqueta de la cabeza del archivo. Y luego, llamamos a la etiqueta de estilo CSS desde allí. Agregamos todos los atributos del elemento del botón en esta etiqueta. Dentro del paréntesis de la clase de botón, ingresamos todas las propiedades para el elemento del botón; En este ejemplo, establecemos el color de fondo en "amarillo."Luego, abrimos una clase de botón que hereda un método llamado" desplazamiento ". En esta función, hacemos lo siguiente: establecemos el ancho en formato de píxel en "100px" y establecemos la altura en formato de píxel en "30px". Después de que terminamos del formato, cerramos el estilo y las etiquetas de la cabeza. Entonces, vamos a la etiqueta del cuerpo. Usamos la etiqueta H1 para crear el título de la página en la etiqueta del cuerpo, luego abrir la etiqueta del botón. La etiqueta del botón usa la clase de la etiqueta de estilo y tiene el texto que aparece en el botón entre. Después de eso, cerramos la etiqueta del botón y la etiqueta del cuerpo.
Como podemos ver en la salida anterior, el tamaño y el color de fondo han cambiado a medida que avanzamos en el botón con nuestro cursor. Esto se debe a que la función de desplazamiento tiene todas estas propiedades definidas en la etiqueta de estilo del archivo del encabezado.
Ejemplo 04: usando el tamaño de fuente para mejorar el tamaño de un botón usando CSS
En este ejemplo, optaremos por un método diferente para cambiar el tamaño de un botón. La propiedad del tamaño de fuente se utilizará para aumentar el tamaño de un botón usando la etiqueta de estilo CSS.
Primero, abrimos la etiqueta de estilo en el encabezado del archivo y creamos una clase de estilo para el botón. En esta clase, asignamos un color de fondo al botón. Después de eso, también asignamos el tamaño de fuente. En este caso, se establece en "25px". Luego, cerramos la clase y el estilo y las etiquetas de la cabeza, respectivamente. Entonces la etiqueta del cuerpo tiene un encabezado y una etiqueta de botón que tiene la clase de etiqueta de estilo heredada en ella. Después de esto, cerramos las etiquetas y guardamos el archivo para abrirlo en nuestro navegador.
En la pantalla de salida, podemos ver que el botón tiene un tamaño aumentado desde el botón predeterminado que proporciona el HTML debido al cambio en la propiedad de tamaño de fuente.
Conclusión
En este artículo, discutimos el tamaño del elemento del botón presente en el lenguaje de marcado de hipertexto. El botón predeterminado tiene un tamaño muy pequeño, lo que dificulta navegar en una página web. Entonces, utilizamos los diferentes enfoques en CSS como la etiqueta de estilo y el enfoque de CSS en línea. La propiedad más común utilizada para alterar el tamaño es la propiedad de ancho y altura de un botón. Discutimos este concepto e implementamos esto en el bloc de notas++. También implementamos el enfoque de tamaño de fuente para aumentar el tamaño de un botón.