El botón es un elemento en el que se puede hacer clic que se utiliza para realizar una acción específica. Usando CSS, puede establecer 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 usando 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 la pseudo-clase :active.
¡Vamos a empezar!
¿Qué es “:activo” en CSS?
Cambiar el color del botón al hacer clic en CSS es posible con la ayuda de “ :activo pseudo-clase. En HTML, indica un elemento que se está activando cuando el usuario hace clic en él. Además, al usar 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 :active.
Vayamos hacia un ejemplo para entender el concepto enunciado.
¿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
< cuerpo >< botón clase = 'btn' > Botón < / botón >
< / cuerpo >
Luego, en CSS, establece el color del botón. Para ello, utilizaremos “ .btn ” para acceder al botón y establecer 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 establezca 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, agreguemos el encabezado con la etiqueta
y el nombre de la clase de botón ' botón ”, dentro de la etiqueta .
HTML
< centro >
< h1 > Cambiar el color del botón < / h1 >
< botón clase = 'botón' > Haz click en mi < / botón >
< / centro >
A continuación, pasaremos a CSS y diseñaremos el botón y aplicaremos :active en él. Para hacerlo, estableceremos el estilo de borde como “ ninguna ” y dar relleno como “ 15px ”. Después de eso, establezca el color del texto del botón como ' rgb(50, 0, 54) ” y su trasfondo como “ RGB (177, 110, 149) ”, y su radio como “ 15px ”:
.botón {
borde : ninguna ;
relleno : 15px ;
color : RGB ( 50 , 0 , 54 ) ;
color de fondo : RGB ( 177 , 110 , 149 ) ;
borde-radio : 15px ;
}
Esto mostrará el siguiente resultado:
Después de eso, aplicaremos: pseudo-clase activa en el botón como ' .botón:activo ” y establecer el color de un botón como “ rgb(200, 255, 0) ”:
.botón : activo {
color de fondo : RGB ( 200 , 255 , 0 ) ;
}
Una vez que implemente todo el código anterior, vaya al archivo HTML y ejecútelo para verificar el resultado:
A partir de la salida, se puede observar que cuando se hace clic en el botón, su color 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 ' :activo Se puede utilizar una pseudoclase. Más específicamente, puede representar el elemento del botón cuando se activa. Usando esta clase, puede establecer diferentes colores de botón cuando el mouse hace clic en él. Este artículo explica el procedimiento para cambiar el color del botón al hacer clic en CSS.
HTML
< centro >< h1 > Cambiar el color del botón < / h1 >
< botón clase = 'botón' > Haz click en mi < / botón >
< / centro >
A continuación, pasaremos a CSS y diseñaremos el botón y aplicaremos :active en él. Para hacerlo, estableceremos el estilo de borde como “ ninguna ” y dar relleno como “ 15px ”. Después de eso, establezca el color del texto del botón como ' rgb(50, 0, 54) ” y su trasfondo como “ RGB (177, 110, 149) ”, y su radio como “ 15px ”:
.botón {borde : ninguna ;
relleno : 15px ;
color : RGB ( 50 , 0 , 54 ) ;
color de fondo : RGB ( 177 , 110 , 149 ) ;
borde-radio : 15px ;
}
Esto mostrará el siguiente resultado:
Después de eso, aplicaremos: pseudo-clase activa en el botón como ' .botón:activo ” y establecer el color de un botón como “ rgb(200, 255, 0) ”:
.botón : activo {color de fondo : RGB ( 200 , 255 , 0 ) ;
}
Una vez que implemente todo el código anterior, vaya al archivo HTML y ejecútelo para verificar el resultado:
A partir de la salida, se puede observar que cuando se hace clic en el botón, su color 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 ' :activo Se puede utilizar una pseudoclase. Más específicamente, puede representar el elemento del botón cuando se activa. Usando esta clase, puede establecer diferentes colores de botón cuando el mouse hace clic en él. Este artículo explica el procedimiento para cambiar el color del botón al hacer clic en CSS.