Mygtukas yra spustelėjamas elementas, naudojamas konkrečiam veiksmui atlikti. Naudodami CSS galite nustatyti skirtingus mygtukų stilius, vienas iš jų yra pakeisti mygtuko spalvą spustelėjus. Mygtuko spalvą galima nustatyti naudojant CSS. :aktyvus “ pseudoklasė.
Šis tinklaraštis išmokys jus, kaip pakeisti mygtuko spalvą spustelėjus. Norėdami tai padaryti, pirmiausia sužinokite apie :active pseudoklasę.
Taigi, pradėkime!
Kas yra „:active“ CSS?
Keisti mygtuko spalvą spustelėjus CSS galima naudojant „ :aktyvus “ pseudoklasė. HTML kalba jis nurodo elementą, kuris suaktyvinamas, kai vartotojas jį spusteli. Be to, naudojant pelę, aktyvinimas prasideda paspaudus pelės klavišą.
Sintaksė
a : aktyvus {
spalva : žalias ;
}
“ a “ nurodo HTML elementą, kuriam bus taikoma :active klasė.
Pereikime prie pavyzdžio, kad suprastume pateiktą sąvoką.
Kaip pakeisti mygtuko spalvą spustelėjus CSS?
Norėdami pakeisti mygtuko spalvą spustelėjus, pirmiausia sukurkite mygtuką HTML faile ir priskirkite klasės pavadinimą ' btn “.
HTML
< kūnas >< mygtuką klasė = 'btn' > Mygtukas < / mygtuką >
< / kūnas >
Tada CSS nustatykite mygtuko spalvą. Norėdami tai padaryti, naudosime „ .btn “ norėdami pasiekti mygtuką ir nustatyti mygtuko spalvą kaip „ rgb(0, 255, 213) “.
CSS
.btn {fono spalva : rgb ( 0 , 255 , 213 ) ;
}
Po to ant mygtuko pritaikykite :aktyvią pseudoklasę kaip „ .btn:aktyvus “ ir nustatykite mygtuko, kuris bus rodomas aktyvioje būsenoje, spalvą kaip „ rgb(123, 180, 17) “:
.btn : aktyvus {fono spalva : rgb ( 123 , 180 , 17 ) ;
}
Tai parodys tokį rezultatą:
Dabar pridėkime antraštę su
žyma ir mygtuko klasės pavadinimu ' mygtuką “, žymos viduje.
HTML
< centras >
< h1 > Keisti mygtuko spalvą < / h1 >
< mygtuką klasė = 'mygtukas' > Paspausk mane < / mygtuką >
< / centras >
Tada pereisime prie CSS, mygtuko stilių ir pritaikysime :active. Norėdami tai padaryti, nustatysime kraštinės stilių kaip „ nė vienas “ ir užpildykite kaip „ 15 piks “. Po to nustatykite mygtuko teksto spalvą kaip „ rgb(50, 0, 54) “ ir jo fonas kaip „ rgb(177, 110, 149) “, o jo spindulys kaip „ 15 piks “:
.mygtukas {
siena : nė vienas ;
kamšalas : 15 piks ;
spalva : rgb ( penkiasdešimt , 0 , 54 ) ;
fono spalva : rgb ( 177 , 110 , 149 ) ;
pasienio spindulys : 15 piks ;
}
Tai parodys tokį rezultatą:
Po to mygtuke pritaikysime aktyvią pseudoklasę kaip „ .button:aktyvus “ ir nustatykite mygtuko spalvą kaip „ rgb(200, 255, 0) “:
.mygtukas : aktyvus {
fono spalva : rgb ( 200 , 255 , 0 ) ;
}
Įdiegę visą aukščiau pateiktą kodą, eikite į HTML failą ir paleiskite jį, kad patikrintumėte rezultatą:
Iš išvesties galima pastebėti paspaudus mygtuką, jo spalva pasikeičia pagal nurodytą RGB spalvos kodą.
Išvada
Norėdami pakeisti mygtuko spalvą spustelėjus CSS, „ :aktyvus “ galima naudoti pseudoklasę. Tiksliau, jis gali atstovauti mygtuko elementui, kai jis suaktyvinamas. Naudodami šią klasę galite nustatyti skirtingas mygtukų spalvas, kai ją spustelėsite. Šiame straipsnyje paaiškinta, kaip pakeisti mygtuko spalvą spustelėjus CSS.
HTML
< centras >< h1 > Keisti mygtuko spalvą < / h1 >
< mygtuką klasė = 'mygtukas' > Paspausk mane < / mygtuką >
< / centras >
Tada pereisime prie CSS, mygtuko stilių ir pritaikysime :active. Norėdami tai padaryti, nustatysime kraštinės stilių kaip „ nė vienas “ ir užpildykite kaip „ 15 piks “. Po to nustatykite mygtuko teksto spalvą kaip „ rgb(50, 0, 54) “ ir jo fonas kaip „ rgb(177, 110, 149) “, o jo spindulys kaip „ 15 piks “:
.mygtukas {siena : nė vienas ;
kamšalas : 15 piks ;
spalva : rgb ( penkiasdešimt , 0 , 54 ) ;
fono spalva : rgb ( 177 , 110 , 149 ) ;
pasienio spindulys : 15 piks ;
}
Tai parodys tokį rezultatą:
Po to mygtuke pritaikysime aktyvią pseudoklasę kaip „ .button:aktyvus “ ir nustatykite mygtuko spalvą kaip „ rgb(200, 255, 0) “:
.mygtukas : aktyvus {fono spalva : rgb ( 200 , 255 , 0 ) ;
}
Įdiegę visą aukščiau pateiktą kodą, eikite į HTML failą ir paleiskite jį, kad patikrintumėte rezultatą:
Iš išvesties galima pastebėti paspaudus mygtuką, jo spalva pasikeičia pagal nurodytą RGB spalvos kodą.
Išvada
Norėdami pakeisti mygtuko spalvą spustelėjus CSS, „ :aktyvus “ galima naudoti pseudoklasę. Tiksliau, jis gali atstovauti mygtuko elementui, kai jis suaktyvinamas. Naudodami šią klasę galite nustatyti skirtingas mygtukų spalvas, kai ją spustelėsite. Šiame straipsnyje paaiškinta, kaip pakeisti mygtuko spalvą spustelėjus CSS.