El botó és un element clicable que s'utilitza per dur a terme una acció específica. Amb CSS, podeu establir diferents estils de botons, un d'ells és canviar el color d'un botó al fer clic. El color d'un botó es pot configurar mitjançant el CSS ' :actiu ” pseudo-classe.
Aquest bloc us ensenyarà el procediment relacionat amb canviar el color del botó en fer clic. Per a això, en primer lloc, aprèn sobre la pseudo-classe :active.
Així doncs, comencem!
Què és ':active' en CSS?
Canviar el color del botó al fer clic a CSS és possible amb l'ajuda del ' :actiu ” pseudo-classe. En HTML, indica un element que s'està activant quan l'usuari hi fa clic. A més, quan s'utilitza un ratolí, l'activació comença quan es prem la tecla del ratolí.
Sintaxi
a : actiu {
color : verd ;
}
“ a ” fa referència a l'element HTML al qual s'aplicarà la classe :active.
Anem cap a un exemple per entendre el concepte indicat.
Com canviar el color del botó al fer clic a CSS?
Per canviar el color d'un botó en fer clic, primer, creeu un botó en un fitxer HTML i assigneu el nom de la classe ' btn ”.
HTML
< cos >< botó classe = 'btn' > Botó < / botó >
< / cos >
A continuació, en CSS, establiu el color del botó. Per fer-ho, utilitzarem ' .btn ” per accedir al botó i definir el color del botó com a “ rgb(0, 255, 213) ”.
CSS
.btn {color de fons : rgb ( 0 , 255 , 213 ) ;
}
Després d'això, apliqueu: pseudo-classe activa al botó com a ' .btn:actiu ” i establiu el color del botó que es mostrarà en el seu estat actiu com a “ rgb(123, 180, 17) ”:
.btn : actiu {color de fons : rgb ( 123 , 180 , 17 ) ;
}
Això mostrarà el següent resultat:
Ara, afegim l'encapçalament amb l'etiqueta
i el nom de la classe del botó ' botó ”, dins de l'etiqueta .
HTML
< centre >
< h1 > Canvia el color del botó < / h1 >
< botó classe = 'botó' > Feu clic a mi < / botó >
< / centre >
A continuació, passarem a CSS i estilitzarem el botó i aplicar-hi :active. Per fer-ho, establirem l'estil de la vora com a ' cap ' i doneu el farciment com ' 15 píxels ”. Després d'això, establiu el color del text del botó com a ' rgb(50, 0, 54) ' i el seu fons com ' rgb(177, 110, 149) ”, i el seu radi com a “ 15 píxels ”:
.botó {
frontera : cap ;
farciment : 15 píxels ;
color : rgb ( 50 , 0 , 54 ) ;
color de fons : rgb ( 177 , 110 , 149 ) ;
frontera-radi : 15 píxels ;
}
Això mostrarà el següent resultat:
Després d'això, aplicarem: pseudo-classe activa al botó com a ' .botó:actiu ” i establiu el color d'un botó com a “ rgb(200, 255, 0) ”:
.botó : actiu {
color de fons : rgb ( 200 , 255 , 0 ) ;
}
Un cop implementeu tot el codi anterior, aneu al fitxer HTML i executeu-lo per comprovar el resultat:
Des de la sortida, es pot observar quan es fa clic al botó, el seu color es canvia segons el codi de color RGB especificat.
Conclusió
Per canviar el color del botó al fer clic a CSS, el ' :actiu ” es pot utilitzar una pseudo-classe. Més concretament, pot representar l'element botó quan s'activa. Amb aquesta classe, podeu establir diferents colors de botons quan el ratolí hi faci clic. En aquest article s'explica el procediment per canviar el color del botó en fer clic a CSS.
HTML
< centre >< h1 > Canvia el color del botó < / h1 >
< botó classe = 'botó' > Feu clic a mi < / botó >
< / centre >
A continuació, passarem a CSS i estilitzarem el botó i aplicar-hi :active. Per fer-ho, establirem l'estil de la vora com a ' cap ' i doneu el farciment com ' 15 píxels ”. Després d'això, establiu el color del text del botó com a ' rgb(50, 0, 54) ' i el seu fons com ' rgb(177, 110, 149) ”, i el seu radi com a “ 15 píxels ”:
.botó {frontera : cap ;
farciment : 15 píxels ;
color : rgb ( 50 , 0 , 54 ) ;
color de fons : rgb ( 177 , 110 , 149 ) ;
frontera-radi : 15 píxels ;
}
Això mostrarà el següent resultat:
Després d'això, aplicarem: pseudo-classe activa al botó com a ' .botó:actiu ” i establiu el color d'un botó com a “ rgb(200, 255, 0) ”:
.botó : actiu {color de fons : rgb ( 200 , 255 , 0 ) ;
}
Un cop implementeu tot el codi anterior, aneu al fitxer HTML i executeu-lo per comprovar el resultat:
Des de la sortida, es pot observar quan es fa clic al botó, el seu color es canvia segons el codi de color RGB especificat.
Conclusió
Per canviar el color del botó al fer clic a CSS, el ' :actiu ” es pot utilitzar una pseudo-classe. Més concretament, pot representar l'element botó quan s'activa. Amb aquesta classe, podeu establir diferents colors de botons quan el ratolí hi faci clic. En aquest article s'explica el procediment per canviar el color del botó en fer clic a CSS.