El botón es un elemento que se puede hacer clic para realizar una acción específica. Usando CSS, puede configurar diferentes estilos de botones, uno de ellos es cambiar el color de un botón al hacer clic. El color de un botón se puede configurar utilizando el CSS ":activo"Pseudo-Clase.

Este blog le enseñará el procedimiento relacionado con cambiar el color del botón al hacer clic. Para esto, en primer lugar, aprenda sobre: ​​pseudo-clase activa.

Vamos a empezar!

¿Qué es ": activo" en CSS??

Cambiar el color del botón en el clic en CSS es posible con la ayuda del ":activo"Pseudo-Clase. En HTML, indica un elemento que se está activando cuando el usuario hace clic en él. Además, cuando se usa un mouse, la activación comienza cuando se presiona la tecla del mouse.

Sintaxis

A: Activo
color verde;

"a"Se refiere al elemento HTML en el que se aplicará la clase:.

Diremos hacia un ejemplo para comprender el concepto declarado.

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

Para cambiar el color de un botón al hacer clic, primero, cree un botón en un archivo HTML y asigne el nombre de clase "btn".

Html

Botón

A continuación, en CSS, configure el color del botón. Para hacerlo, usaremos ".btn"Para acceder al botón y configure el color del botón como"RGB (0, 255, 213)".

CSS

.btn
Color de fondo: RGB (0, 255, 213);

Después de eso, aplique: pseudo-clase activa en el botón como ".BTN: Activo"Y configure el color del botón que se mostrará en su estado activo como"RGB (123, 180, 17)":

.btn: activo
Color de fondo: RGB (123, 180, 17);

Esto mostrará el siguiente resultado:

Ahora, agregemos el encabezado con

Nombre de clase de etiqueta y botón "botón", Dentro de la etiqueta.

Html

Cambiar el color del botón

Haz click en mi

A continuación, nos moveremos a CSS y peinaremos el botón y aplicaremos: activo en él. Para hacerlo, estableceremos el estilo de borde como "ninguno"Y da relleno como"15px". Después de eso, configure el color del texto del botón como "RGB (50, 0, 54)"Y sus antecedentes como"RGB (177, 110, 149)", Y su radio como"15px":

.botón
borde: ninguno;
relleno: 15px;
Color: RGB (50, 0, 54);
Color de fondo: RGB (177, 110, 149);
Border-Radius: 15px;

Esto mostrará el siguiente resultado:

Después de eso, aplicaremos: pseudo-clase activa en el botón como ".Botón: Activo"Y configure el color de un botón como"RGB (200, 255, 0)":

.botón: activo
Color de fondo: RGB (200, 255, 0);

Una vez que implementa todo el código anterior, vaya al archivo HTML y ejecútelo para verificar el resultado:

Desde la salida, se puede observar cuando se hace clic en el botón, su color se cambia de acuerdo con el código de color RGB especificado.

Conclusión

Para cambiar el color del botón al hacer clic en CSS, el ":activoSe puede usar pseudo-clase. Más específicamente, puede representar el elemento del botón cuando se activa. Usando esta clase, puede configurar diferentes colores de botones cuando el mouse hace clic en ella. Este artículo explicó el procedimiento para cambiar el color del botón al hacer clic en CSS.