A gomb egy kattintható elem, amely egy adott művelet végrehajtására szolgál. A CSS használatával különböző stílusú gombokat állíthat be, amelyek közül az egyik a gomb színének megváltoztatása kattintásra. Egy gomb színe a CSS segítségével állítható be. :aktív ” pszeudoosztály.
Ez a blog megtanítja Önnek a gomb színének kattintáskor történő megváltoztatásával kapcsolatos eljárást. Ehhez először ismerje meg az :active pszeudoosztályt.
Szóval, kezdjük!
Mi a „:active” a CSS-ben?
A gomb színének megváltoztatása kattintáskor a CSS-ben a „ :aktív ” pszeudoosztály. A HTML-ben egy elemet jelöl, amely akkor aktiválódik, amikor a felhasználó rákattint. Sőt, egér használatakor az aktiválás az egérgomb megnyomásával indul.
Szintaxis
a : aktív {
szín : zöld ;
}
' a ” arra a HTML elemre utal, amelyre az :active osztály kerül alkalmazásra.
Menjünk egy példa felé, hogy megértsük a megfogalmazott koncepciót.
Hogyan lehet megváltoztatni a gomb színét kattintásra a CSS-ben?
A gomb színének kattintáskor történő megváltoztatásához először hozzon létre egy gombot egy HTML-fájlban, és rendelje hozzá az osztály nevét ' btn ”.
HTML
< test >< gomb osztály = 'btn' > Gomb < / gomb >
< / test >
Ezután a CSS-ben állítsa be a gomb színét. Ehhez a „ .btn ' a gomb eléréséhez és a gomb színének beállításához ' rgb(0; 255; 213) ”.
CSS
.btn {háttérszín : rgb ( 0 , 255 , 213 ) ;
}
Ezt követően alkalmazza az aktív pszeudoosztályt a gombon, mint ' .btn:aktív ” és állítsa be az aktív állapotban megjelenő gomb színét „ rgb(123, 180, 17) ”:
.btn : aktív {háttérszín : rgb ( 123 , 180 , 17 ) ;
}
Ez a következő eredményt mutatja:
Most adjuk hozzá a fejlécet
címkével és gombosztálynévvel gomb ”, a címkén belül.
HTML
< központ >
< h1 > A gomb színének módosítása < / h1 >
< gomb osztály = 'gomb' > Kattints ide < / gomb >
< / központ >
Ezután áttérünk a CSS-re, stílusozzuk a gombot, és alkalmazzuk az :active-ot. Ehhez a szegélystílust a következőképpen állítjuk be: egyik sem ', és adja meg a kitöltést ' 15 képpont ”. Ezután állítsa be a gomb szövegének színét ' rgb(50; 0; 54) ' és háttere ' rgb(177, 110, 149) ”, sugara pedig „ 15 képpont ”:
.gomb {
határ : egyik sem ;
párnázás : 15 képpont ;
szín : rgb ( ötven , 0 , 54 ) ;
háttérszín : rgb ( 177 , 110 , 149 ) ;
határ-sugár : 15 képpont ;
}
Ez a következő eredményt mutatja:
Ezt követően a gombon az aktív pszeudoosztályt fogjuk alkalmazni, mint ' .button:aktív ” és állítsa be a gomb színét „ rgb(200; 255; 0) ”:
.gomb : aktív {
háttérszín : rgb ( 200 , 255 , 0 ) ;
}
Miután végrehajtotta az összes fenti kódot, lépjen a HTML-fájlba, és futtassa az eredmény megtekintéséhez:
A kimenetről megfigyelhető, hogy a gombra kattintva a színe megváltozik a megadott RGB színkódnak megfelelően.
Következtetés
A gomb színének megváltoztatásához kattintáskor a CSS-ben, a „ :aktív ” pszeudoosztály használható. Pontosabban, a gombelemet képviselheti, amikor aktiválásra kerül. Ennek az osztálynak a használatával különböző gombszíneket állíthat be, amikor rákattint az egérrel. Ez a cikk ismerteti a gombok színének módosítását kattintáskor a CSS-ben.
HTML
< központ >< h1 > A gomb színének módosítása < / h1 >
< gomb osztály = 'gomb' > Kattints ide < / gomb >
< / központ >
Ezután áttérünk a CSS-re, stílusozzuk a gombot, és alkalmazzuk az :active-ot. Ehhez a szegélystílust a következőképpen állítjuk be: egyik sem ', és adja meg a kitöltést ' 15 képpont ”. Ezután állítsa be a gomb szövegének színét ' rgb(50; 0; 54) ' és háttere ' rgb(177, 110, 149) ”, sugara pedig „ 15 képpont ”:
.gomb {határ : egyik sem ;
párnázás : 15 képpont ;
szín : rgb ( ötven , 0 , 54 ) ;
háttérszín : rgb ( 177 , 110 , 149 ) ;
határ-sugár : 15 képpont ;
}
Ez a következő eredményt mutatja:
Ezt követően a gombon az aktív pszeudoosztályt fogjuk alkalmazni, mint ' .button:aktív ” és állítsa be a gomb színét „ rgb(200; 255; 0) ”:
.gomb : aktív {háttérszín : rgb ( 200 , 255 , 0 ) ;
}
Miután végrehajtotta az összes fenti kódot, lépjen a HTML-fájlba, és futtassa az eredmény megtekintéséhez:
A kimenetről megfigyelhető, hogy a gombra kattintva a színe megváltozik a megadott RGB színkódnak megfelelően.
Következtetés
A gomb színének megváltoztatásához kattintáskor a CSS-ben, a „ :aktív ” pszeudoosztály használható. Pontosabban, a gombelemet képviselheti, amikor aktiválásra kerül. Ennek az osztálynak a használatával különböző gombszíneket állíthat be, amikor rákattint az egérrel. Ez a cikk ismerteti a gombok színének módosítását kattintáskor a CSS-ben.