Tlačidlo je klikateľný prvok, ktorý sa používa na vykonanie konkrétnej akcie. Pomocou CSS môžete nastaviť rôzne štýly tlačidiel, jedným z nich je zmena farby tlačidla po kliknutí. Farbu tlačidla je možné nastaviť pomocou CSS “ :aktívny “ pseudotrieda.
Tento blog vás naučí postup súvisiaci so zmenou farby tlačidla po kliknutí. Najprv sa naučte o pseudotriede :active.
Takže, začnime!
Čo je „:active“ v CSS?
Zmena farby tlačidla po kliknutí v CSS je možná pomocou „ :aktívny “ pseudotrieda. V HTML označuje prvok, ktorý sa aktivuje, keď naň používateľ klikne. Navyše pri použití myši sa aktivácia spustí po stlačení klávesu myši.
Syntax
a : aktívny {
farba : zelená ;
}
“ a ” odkazuje na element HTML, na ktorý sa použije trieda :active.
Poďme k príkladu, aby sme pochopili uvedený koncept.
Ako zmeniť farbu tlačidla pri kliknutí v CSS?
Ak chcete zmeniť farbu tlačidla po kliknutí, najprv vytvorte tlačidlo v súbore HTML a priraďte mu názov triedy “ btn “.
HTML
< telo >< tlačidlo trieda = 'btn' > Tlačidlo < / tlačidlo >
< / telo >
Ďalej v CSS nastavte farbu tlačidla. Na tento účel použijeme „ .btn ” pre prístup k tlačidlu a nastavenie farby tlačidla ako “ rgb(0, 255, 213) “.
CSS
.btn {farba pozadia : rgb ( 0 , 255 , 213 ) ;
}
Potom použite :active pseudo-class na tlačidlo ako „ .btn:active “ a nastavte farbu tlačidla, ktoré sa bude zobrazovať v aktívnom stave ako „ rgb(123, 180, 17) “:
.btn : aktívny {farba pozadia : rgb ( 123 , 180 , 17 ) ;
}
To ukáže nasledujúci výsledok:
Teraz pridajte nadpis so značkou
a názvom triedy tlačidla “ tlačidlo “, vnútri značky .
HTML
< centrum >
< h1 > Zmena farby tlačidla < / h1 >
< tlačidlo trieda = 'tlačidlo' > Klikni na mňa < / tlačidlo >
< / centrum >
Ďalej sa presunieme do CSS a nastylujeme tlačidlo a aplikujeme naň :active. Aby sme tak urobili, nastavíme štýl okraja ako „ žiadny “ a zadajte výplň ako „ 15 pixelov “. Potom nastavte farbu textu tlačidla ako „ rgb(50, 0, 54) “ a jeho pozadie ako „ rgb(177, 110, 149) “ a jej polomer ako „ 15 pixelov “:
.tlačidlo {
hranica : žiadny ;
vypchávka : 15 pixelov ;
farba : rgb ( päťdesiat , 0 , 54 ) ;
farba pozadia : rgb ( 177 , 110 , 149 ) ;
hraničný polomer : 15 pixelov ;
}
To ukáže nasledujúci výsledok:
Potom na tlačidlo použijeme :active pseudo-class ako „ .tlačidlo:aktívne “ a nastavte farbu tlačidla ako „ rgb(200, 255, 0) “:
.tlačidlo : aktívny {
farba pozadia : rgb ( 200 , 255 , 0 ) ;
}
Po implementácii vyššie uvedeného kódu prejdite do súboru HTML a spustite ho, aby ste skontrolovali výsledok:
Z výstupu je možné pozorovať, že po kliknutí na tlačidlo sa jeho farba zmení podľa zadaného farebného kódu RGB.
Záver
Ak chcete zmeniť farbu tlačidla po kliknutí v CSS, „ :aktívny ” možno použiť pseudotriedu. Presnejšie povedané, môže predstavovať prvok tlačidla, keď sa aktivuje. Pomocou tejto triedy môžete nastaviť rôzne farby tlačidla, keď naň kliknete myšou. Tento článok vysvetľuje postup zmeny farby tlačidla po kliknutí v CSS.
HTML
< centrum >< h1 > Zmena farby tlačidla < / h1 >
< tlačidlo trieda = 'tlačidlo' > Klikni na mňa < / tlačidlo >
< / centrum >
Ďalej sa presunieme do CSS a nastylujeme tlačidlo a aplikujeme naň :active. Aby sme tak urobili, nastavíme štýl okraja ako „ žiadny “ a zadajte výplň ako „ 15 pixelov “. Potom nastavte farbu textu tlačidla ako „ rgb(50, 0, 54) “ a jeho pozadie ako „ rgb(177, 110, 149) “ a jej polomer ako „ 15 pixelov “:
.tlačidlo {hranica : žiadny ;
vypchávka : 15 pixelov ;
farba : rgb ( päťdesiat , 0 , 54 ) ;
farba pozadia : rgb ( 177 , 110 , 149 ) ;
hraničný polomer : 15 pixelov ;
}
To ukáže nasledujúci výsledok:
Potom na tlačidlo použijeme :active pseudo-class ako „ .tlačidlo:aktívne “ a nastavte farbu tlačidla ako „ rgb(200, 255, 0) “:
.tlačidlo : aktívny {farba pozadia : rgb ( 200 , 255 , 0 ) ;
}
Po implementácii vyššie uvedeného kódu prejdite do súboru HTML a spustite ho, aby ste skontrolovali výsledok:
Z výstupu je možné pozorovať, že po kliknutí na tlačidlo sa jeho farba zmení podľa zadaného farebného kódu RGB.
Záver
Ak chcete zmeniť farbu tlačidla po kliknutí v CSS, „ :aktívny ” možno použiť pseudotriedu. Presnejšie povedané, môže predstavovať prvok tlačidla, keď sa aktivuje. Pomocou tejto triedy môžete nastaviť rôzne farby tlačidla, keď naň kliknete myšou. Tento článok vysvetľuje postup zmeny farby tlačidla po kliknutí v CSS.