Gumb je element, ki ga je mogoče klikniti in se uporablja za izvedbo določenega dejanja. Z uporabo CSS lahko nastavite različne sloge gumbov, eden od njih je sprememba barve gumba ob kliku. Barvo gumba lahko nastavite s pomočjo CSS ' :aktivno ” psevdorazred.
Ta blog vas bo naučil postopka, povezanega s spreminjanjem barve gumba ob kliku. Za to se najprej poučite o psevdorazredu :active.
Torej, začnimo!
Kaj je »:active« v CSS?
Spreminjanje barve gumba ob kliku v CSS je možno s pomočjo » :aktivno ” psevdorazred. V HTML-ju označuje element, ki se aktivira, ko uporabnik nanj klikne. Poleg tega se pri uporabi miške aktiviranje začne, ko pritisnete tipko miške.
Sintaksa
a : aktivna {
barva : zelena ;
}
“ a ” se nanaša na element HTML, na katerem bo uporabljen razred :active.
Pojdimo k primeru, da bi razumeli navedeni koncept.
Kako spremeniti barvo gumba ob kliku v CSS?
Če želite spremeniti barvo gumba ob kliku, najprej ustvarite gumb v datoteki HTML in mu dodelite ime razreda ' btn ”.
HTML
< telo >< gumb razred = 'btn' > Gumb < / gumb >
< / telo >
Nato v CSS nastavite barvo gumba. Za to bomo uporabili » .btn « za dostop do gumba in nastavitev barve gumba kot » rgb(0, 255, 213) ”.
CSS
.btn {Barva ozadja : rgb ( 0 , 255 , 213 ) ;
}
Po tem uporabite :active psevdorazred na gumbu kot ' .btn:aktivno « in nastavite barvo gumba, ki bo v aktivnem stanju prikazan kot » rgb(123, 180, 17) ”:
.btn : aktivna {Barva ozadja : rgb ( 123 , 180 , 17 ) ;
}
To bo pokazalo naslednji rezultat:
Zdaj pa dodajmo naslov z oznako
in ime razreda gumba ' gumb ”, znotraj oznake .
HTML
< center >
< h1 > Spremeni barvo gumba < / h1 >
< gumb razred = 'gumb' > Kliknite Jaz < / gumb >
< / center >
Nato se bomo premaknili na CSS in oblikovali gumb ter nanj uporabili :active. Da bi to naredili, bomo slog obrobe nastavili kot ' nič « in podajte oblazinjenje kot » 15 slikovnih pik ”. Nato nastavite barvo besedila gumba kot ' rgb(50, 0, 54) « in njegovo ozadje kot » rgb(177, 110, 149) «, njegov polmer pa kot » 15 slikovnih pik ”:
.gumb {
meja : nič ;
oblazinjenje : 15 slikovnih pik ;
barva : rgb ( petdeset , 0 , 54 ) ;
Barva ozadja : rgb ( 177 , 110 , 149 ) ;
mejni polmer : 15 slikovnih pik ;
}
To bo pokazalo naslednji rezultat:
Po tem bomo uporabili :active psevdo-razred na gumb kot ' .button:aktivno « in nastavite barvo gumba kot » rgb(200, 255, 0) ”:
.gumb : aktivna {
Barva ozadja : rgb ( 200 , 255 , 0 ) ;
}
Ko implementirate vso zgornjo kodo, pojdite na datoteko HTML in jo izvedite, da preverite rezultat:
Iz izhoda je mogoče opaziti, da se ob kliku gumba njegova barva spremeni v skladu z navedeno barvno kodo RGB.
Zaključek
Če želite spremeniti barvo gumba ob kliku v CSS, uporabite » :aktivno ” lahko uporabite psevdorazred. Natančneje, lahko predstavlja element gumba, ko se aktivira. S tem razredom lahko nastavite različne barve gumbov, ko z miško kliknete nanj. V tem članku je razložen postopek spreminjanja barve gumba ob kliku v CSS.
HTML
< center >< h1 > Spremeni barvo gumba < / h1 >
< gumb razred = 'gumb' > Kliknite Jaz < / gumb >
< / center >
Nato se bomo premaknili na CSS in oblikovali gumb ter nanj uporabili :active. Da bi to naredili, bomo slog obrobe nastavili kot ' nič « in podajte oblazinjenje kot » 15 slikovnih pik ”. Nato nastavite barvo besedila gumba kot ' rgb(50, 0, 54) « in njegovo ozadje kot » rgb(177, 110, 149) «, njegov polmer pa kot » 15 slikovnih pik ”:
.gumb {meja : nič ;
oblazinjenje : 15 slikovnih pik ;
barva : rgb ( petdeset , 0 , 54 ) ;
Barva ozadja : rgb ( 177 , 110 , 149 ) ;
mejni polmer : 15 slikovnih pik ;
}
To bo pokazalo naslednji rezultat:
Po tem bomo uporabili :active psevdo-razred na gumb kot ' .button:aktivno « in nastavite barvo gumba kot » rgb(200, 255, 0) ”:
.gumb : aktivna {Barva ozadja : rgb ( 200 , 255 , 0 ) ;
}
Ko implementirate vso zgornjo kodo, pojdite na datoteko HTML in jo izvedite, da preverite rezultat:
Iz izhoda je mogoče opaziti, da se ob kliku gumba njegova barva spremeni v skladu z navedeno barvno kodo RGB.
Zaključek
Če želite spremeniti barvo gumba ob kliku v CSS, uporabite » :aktivno ” lahko uporabite psevdorazred. Natančneje, lahko predstavlja element gumba, ko se aktivira. S tem razredom lahko nastavite različne barve gumbov, ko z miško kliknete nanj. V tem članku je razložen postopek spreminjanja barve gumba ob kliku v CSS.