Cómo establecer el tamaño del botón

El "El elemento ayuda a los usuarios a generar eventos o tomar cualquier acción. Los botones también se pueden utilizar para enviar el formulario y obtener información. Los usuarios pueden agregar cualquier tipo de botón a la página web, incluidos botones redondos, cuadrados, rectángulos y muchos más. Además, los usuarios también pueden establecer el tamaño del botón utilizando el "CSS"altura" y "ancho"Propiedades según su elección.

Este artículo indicará:

• Cómo hacer/crear un botón en HTML?
• Cómo establecer el tamaño del botón en HTML usando las propiedades de CSS?

Cómo hacer/crear un botón en HTML?

Para hacer un botón, en primer lugar, hacer un "div"Contenedor utilizando el""Etiqueta e insertando un"identificaciónAtributo con un valor específico. A continuación, agregue un "Elemento "e inserta algún texto para mostrarlo:

Entregar

Se puede observar que el botón se ha creado con éxito:

Cómo establecer el tamaño del botón en HTML usando las propiedades de CSS?

Para establecer el tamaño del botón, siga el procedimiento mencionado.

Paso 1: Contenedor de estilo "Div"

En primer lugar, acceda al "identificación"Atributo con la ayuda del"#"Selector y el nombre de ID"tamaño btn". Luego, aplique las propiedades de la lista a continuación para el estilo:

#btn-size
margen: 50px 150px;
Altura: 100px;
Ancho: 100px;
relleno: 40px;
borde: 3px sólido RGB (23, 8, 228);
Color de fondo: RGB (245, 191, 111);

Aquí:

• El "margenSe utiliza la propiedad para asignar el espacio fuera del límite del elemento.
• "altura"Define el tamaño de altura del elemento.
• "ancho"Establece el tamaño del ancho del elemento.
• "relleno"Asigna espacio dentro del límite del elemento.
• "borde"Se usa para definir un límite alrededor del elemento.
• "color de fondo"Se utiliza para configurar el color de fondo en el elemento definido.

Producción

Paso 2: Establezca el tamaño del botón

Ahora, acceda al "Elemento "con la ayuda del nombre de la etiqueta y aplique las siguientes propiedades para establecer el tamaño del botón:

botón
Color de fondo: RGB (127, 235, 145);
Color: RGB (184, 130, 238);
Ancho: 100px;
Altura: 80px;
Radio fronterizo: 30%;

En el código anterior:

• El "color de fondo"Se usa para establecer el color de fondo del botón.
• "color"Especifica el color del texto.
• "ancho"Se usa para establecer el ancho del botón. Por ejemplo, hemos especificado el valor de ancho como "100px".
• "altura"Establece la altura del botón como"80px"
• "radio fronterizoLa propiedad define las esquinas del elemento redondeado:

Paso 3: Aplicar la propiedad ": Hover" en el botón

Ahora, aplique el ":flotar"Pseudo-Clase junto con el elemento del botón para agregar el efecto de desplazamiento en el botón:

Botón: Hover
Color de fondo: RGB (16, 185, 190);

Se puede notar que el efecto flotar se agrega al botón que cambia el color del botón.

Conclusión

Para establecer el tamaño del botón, primero, cree un botón con la ayuda del "" elemento. A continuación, acceda al botón en CSS por nombre de la etiqueta y aplique el "altura" y "ancho"Propiedades de CSS para establecer su tamaño. Además, los usuarios también pueden aplicar otras propiedades de CSS, incluidas "color""Radio de botón" y "color de fondo"Para el estilo. Esta publicación ha demostrado el procedimiento para configurar el tamaño del botón.