HTML proporciona diferentes elementos; Uno de ellos es el "botón", Que se utiliza para realizar una acción específica en la página web. Usando CSS, puede diseñar el botón de diferentes maneras, como el tamaño, el color, la forma, la forma, la forma del botón y muchos más. Para hacerlo, se pueden utilizar diferentes propiedades de CSS para peinar el botón de acuerdo con los requisitos.

Este manual le enseñará el procedimiento de modificar el color del botón. Vamos a empezar!

Cómo cambiar el color del botón en CSS?

Puede cambiar el color del botón usando el "color de fondo"Propiedad y configure el color del botón de acuerdo con sus preferencias. Básicamente, el "color de fondoLa propiedad se utiliza para agregar el color de fondo de los elementos HTML.

Sintaxis

La sintaxis de la propiedad de color de fondo es la siguiente:

Color de fondo: valor

En lugar del valor de color de fondo, puede establecer el color que desea mostrar detrás de los elementos HTML.

Ahora, pasemos al ejemplo práctico, en el que cambiaremos el color del botón.

Ejemplo

Primero, aprenda a crear un botón en Div y luego cambie su color usando CSS.

Paso 1: Crear Div & Botón

En HTML, crearemos un DIV y asignaremos el nombre de clase como "div". Dentro de la etiqueta, agregaremos un encabezado usando el

etiqueta y un botón usando la etiqueta con el nombre de la clase como "btn". El texto que se mostrará en el botón es "Color".

Html

Cambiar el color del botón en CSS

Color

Se puede ver que se crea el Div y un botón:

Ahora, pasaremos al siguiente paso para diseñar el div creado usando CSS.

Paso 2: Estilo Div

Aquí, usa ".div"Para acceder al contenedor creado y establecer su altura como"200px". Luego, diseñe el DIV usando el "borde"Propiedad para establecer el borde alrededor del Div. El ancho de la frontera se establece como "4px", Su estilo como"ranura", Y color como"RGB (1, 34, 77)". Estableceremos la forma del borde con el "radio fronterizo"Propiedad y establecer su valor como"25px". Después de eso, usa el "color de fondo"Propiedad para establecer el color de fondo del DIV y asignar el valor del color como"RGB (210, 243, 241)".

CSS

.div
Altura: 200px;
borde: 4px Groove RGB (1, 34, 77);
Border-Radius: 25px;
Color de fondo: RGB (210, 243, 241);

Como resultado, el contenedor creado tiene el estilo:

Pasemos al paso final, en el que coloreamos el botón usando CSS.

Paso 3: Cambiar el color del botón

Después de diseñar el div en CSS, usaremos ".btn"Para acceder al botón que se crea en HTML. Luego, establezca el valor de la propiedad fronteriza como "ninguno"Para eliminar el estilo de borde predeterminado. Especifique el valor de la propiedad fronteriza-radio como "15px"Para configurar la forma del botón

Estilizar el texto del botón usando la propiedad del tamaño de la fuente y establecer su valor como "xx-grande". Después de eso, usaremos el relleno como "10px"Para crear espacio entre el texto agregado y el borde del botón.

Al final, use la propiedad de color y establezca su valor como "RGB (255, 251, 7)"Para colorear la propiedad de texto y color de fondo como"RGB (43, 87, 84)"Para configurar el color del botón:

.btn
borde: ninguno;
Border-Radius: 15px;
tamaño de fuente: XX-Large;
relleno: 10px;
Color: RGB (255, 251, 7);
Color de fondo: RGB (43, 87, 84);

La salida dada indicó que el color del botón cambia correctamente:

Hemos explicado el método para cambiar el color del botón en CSS.

Conclusión

En CSS, el "color de fondoSe utiliza la propiedad para establecer el color del botón. Usando esto, puede configurar el color de acuerdo con su elección y diseñar elegantemente un botón. También puede usar diferentes propiedades para mejorar el aspecto del botón usando CSS. En esta guía, hemos explicado el método para cambiar el color del botón en CSS y proporcionados un ejemplo para su mejor comprensión.