Painike on napsautettava elementti, jota käytetään tietyn toiminnon suorittamiseen. CSS:n avulla voit asettaa erilaisia painikkeiden tyylejä, joista yksi on muuttaa painikkeen väriä napsautuksella. Painikkeen värin voi asettaa CSS:n avulla. : aktiivinen ”pseudoluokka.
Tämä blogi opettaa sinulle prosessin, joka liittyy painikkeen värin vaihtamiseen napsauttamalla. Tätä varten tutustu ensin :active pseudo-luokkaan.
Joten, aloitetaan!
Mikä on ':active' CSS:ssä?
Painikkeen värin muuttaminen napsautuksella CSS:ssä on mahdollista ' : aktiivinen ”pseudoluokka. HTML:ssä se osoittaa elementin, joka aktivoituu, kun käyttäjä napsauttaa sitä. Lisäksi hiirtä käytettäessä aktivointi alkaa, kun hiiren näppäintä painetaan.
Syntaksi
a : aktiivinen {
väri- : vihreä ;
}
' a ” viittaa HTML-elementtiin, johon :active-luokkaa sovelletaan.
Siirrytään esimerkkiin ymmärtääksemme esitetyn käsitteen.
Kuinka muuttaa painikkeen väriä napsautuksella CSS:ssä?
Jos haluat muuttaa painikkeen väriä napsautuksella, luo ensin painike HTML-tiedostoon ja anna luokan nimi ' btn ”.
HTML
< kehon >< -painiketta luokkaa = 'btn' > Painike < / -painiketta >
< / kehon >
Määritä seuraavaksi painikkeen väri CSS:ssä. Käytämme tätä varten ' .btn ' päästäksesi painikkeeseen ja asettaaksesi painikkeen väriksi ' rgb(0; 255; 213) ”.
CSS
.btn {taustaväri : rgb ( 0 , 255 , 213 ) ;
}
Käytä sen jälkeen :aktiivista pseudoluokkaa painikkeessa nimellä ' .btn:active ' ja aseta aktiivisessa tilassa näkyvän painikkeen väriksi ' rgb(123, 180, 17) ':
.btn : aktiivinen {taustaväri : rgb ( 123 , 180 , 17 ) ;
}
Tämä näyttää seuraavan tuloksen:
Lisätään nyt otsikko
-tunnisteella ja painikkeen luokan nimi ' -painiketta ”, -tunnisteen sisällä.
HTML
< keskusta >
< h1 > Muuta painikkeen väriä < / h1 >
< -painiketta luokkaa = 'painike' > Napsauta Minä < / -painiketta >
< / keskusta >
Seuraavaksi siirrymme CSS:ään ja muotoilemme painiketta ja käytämme siihen :activea. Tätä varten asetamme reunuksen tyyliksi ' ei mitään ' ja anna täyte muodossa ' 15 kuvapistettä ”. Aseta sen jälkeen painikkeen tekstin väriksi ' rgb(50; 0; 54) ' ja sen tausta ' rgb(177, 110, 149) ja sen säde muodossa ' 15 kuvapistettä ':
.painiketta {
rajaa : ei mitään ;
pehmuste : 15 kuvapistettä ;
väri- : rgb ( viisikymmentä , 0 , 54 ) ;
taustaväri : rgb ( 177 , 110 , 149 ) ;
raja-säde : 15 kuvapistettä ;
}
Tämä näyttää seuraavan tuloksen:
Tämän jälkeen käytämme :aktiivista pseudoluokkaa painikkeeseen nimellä ' .button:aktiivinen ' ja aseta painikkeen väriksi ' rgb(200; 255; 0) ':
.painiketta : aktiivinen {
taustaväri : rgb ( 200 , 255 , 0 ) ;
}
Kun olet ottanut käyttöön kaiken yllä olevan koodin, siirry HTML-tiedostoon ja suorita se tarkistaaksesi tuloksen:
Tulosteesta voidaan havaita, kun painiketta napsautetaan, sen väri muuttuu määritellyn RGB-värikoodin mukaan.
Johtopäätös
Jos haluat muuttaa painikkeen väriä napsauttamalla CSS:ssä, ' : aktiivinen ” pseudoluokkaa voidaan käyttää. Tarkemmin sanottuna se voi edustaa painikeelementtiä, kun se aktivoituu. Tämän luokan avulla voit asettaa eri painikkeiden värejä, kun hiirtä napsautetaan sitä. Tässä artikkelissa selitettiin painikkeen värin muuttaminen napsautuksella CSS:ssä.
HTML
< keskusta >< h1 > Muuta painikkeen väriä < / h1 >
< -painiketta luokkaa = 'painike' > Napsauta Minä < / -painiketta >
< / keskusta >
Seuraavaksi siirrymme CSS:ään ja muotoilemme painiketta ja käytämme siihen :activea. Tätä varten asetamme reunuksen tyyliksi ' ei mitään ' ja anna täyte muodossa ' 15 kuvapistettä ”. Aseta sen jälkeen painikkeen tekstin väriksi ' rgb(50; 0; 54) ' ja sen tausta ' rgb(177, 110, 149) ja sen säde muodossa ' 15 kuvapistettä ':
.painiketta {rajaa : ei mitään ;
pehmuste : 15 kuvapistettä ;
väri- : rgb ( viisikymmentä , 0 , 54 ) ;
taustaväri : rgb ( 177 , 110 , 149 ) ;
raja-säde : 15 kuvapistettä ;
}
Tämä näyttää seuraavan tuloksen:
Tämän jälkeen käytämme :aktiivista pseudoluokkaa painikkeeseen nimellä ' .button:aktiivinen ' ja aseta painikkeen väriksi ' rgb(200; 255; 0) ':
.painiketta : aktiivinen {taustaväri : rgb ( 200 , 255 , 0 ) ;
}
Kun olet ottanut käyttöön kaiken yllä olevan koodin, siirry HTML-tiedostoon ja suorita se tarkistaaksesi tuloksen:
Tulosteesta voidaan havaita, kun painiketta napsautetaan, sen väri muuttuu määritellyn RGB-värikoodin mukaan.
Johtopäätös
Jos haluat muuttaa painikkeen väriä napsauttamalla CSS:ssä, ' : aktiivinen ” pseudoluokkaa voidaan käyttää. Tarkemmin sanottuna se voi edustaa painikeelementtiä, kun se aktivoituu. Tämän luokan avulla voit asettaa eri painikkeiden värejä, kun hiirtä napsautetaan sitä. Tässä artikkelissa selitettiin painikkeen värin muuttaminen napsautuksella CSS:ssä.