Tlačítko je klikací prvek používaný k provedení konkrétní akce. Pomocí CSS můžete nastavit různé styly tlačítek, jedním z nich je změna barvy tlačítka po kliknutí. Barvu tlačítka lze nastavit pomocí CSS “ :aktivní “ pseudotřída.
Tento blog vás naučí postup související se změnou barvy tlačítka po kliknutí. Za tímto účelem se nejprve naučte o pseudotřídě :active.
Takže, začněme!
Co je „:active“ v CSS?
Změna barvy tlačítka po kliknutí v CSS je možná pomocí „ :aktivní “ pseudotřída. V HTML označuje prvek, který se aktivuje, když na něj uživatel klikne. Navíc při použití myši se aktivace spustí po stisku klávesy myši.
Syntax
A : aktivní {
barva : zelená ;
}
“ A ” odkazuje na HTML element, na který bude aplikována třída :active.
Pojďme k příkladu, abychom pochopili uvedený koncept.
Jak změnit barvu tlačítka při kliknutí v CSS?
Chcete-li změnit barvu tlačítka po kliknutí, nejprve vytvořte tlačítko v souboru HTML a přiřaďte mu název třídy „ btn “.
HTML
< tělo >< knoflík třída = 'btn' > Knoflík < / knoflík >
< / tělo >
Dále v CSS nastavte barvu tlačítka. K tomu použijeme „ .btn “ pro přístup k tlačítku a nastavte barvu tlačítka jako „ rgb(0, 255, 213) “.
CSS
.btn {barva pozadí : rgb ( 0 , 255 , 213 ) ;
}
Poté použijte :active pseudo-class na tlačítko jako „ .btn:active “ a nastavte barvu tlačítka, které se bude zobrazovat v aktivním stavu, jako „ rgb(123, 180, 17) “:
.btn : aktivní {barva pozadí : rgb ( 123 , 180 , 17 ) ;
}
To ukáže následující výsledek:
Nyní přidáme nadpis se značkou
a názvem třídy tlačítka “ knoflík “, uvnitř značky .
HTML
< centrum >
< h1 > Změnit barvu tlačítka < / h1 >
< knoflík třída = 'knoflík' > Klikni na mě < / knoflík >
< / centrum >
Dále se přesuneme do CSS a stylizujeme tlačítko a aplikujeme na něj :active. Za tímto účelem nastavíme styl ohraničení jako „ žádný “ a zadejte výplň jako „ 15 pixelů “. Poté nastavte barvu textu tlačítka jako „ rgb(50, 0, 54) “ a jeho pozadí jako „ rgb(177, 110, 149) “ a jeho poloměr jako „ 15 pixelů “:
.knoflík {
okraj : žádný ;
vycpávka : 15 pixelů ;
barva : rgb ( padesáti , 0 , 54 ) ;
barva pozadí : rgb ( 177 , 110 , 149 ) ;
hraniční poloměr : 15 pixelů ;
}
To ukáže následující výsledek:
Poté na tlačítko použijeme :active pseudo-class jako „ .tlačítko:aktivní “ a nastavte barvu tlačítka jako „ rgb(200, 255, 0) “:
.knoflík : aktivní {
barva pozadí : rgb ( 200 , 255 , 0 ) ;
}
Jakmile implementujete veškerý výše uvedený kód, přejděte do souboru HTML a spusťte jej, abyste viděli výsledek:
Z výstupu lze pozorovat, že po kliknutí na tlačítko se jeho barva změní podle zadaného barevného kódu RGB.
Závěr
Chcete-li změnit barvu tlačítka po kliknutí v CSS, „ :aktivní ” lze použít pseudotřídu. Přesněji řečeno, může představovat prvek tlačítka, když je aktivován. Pomocí této třídy můžete nastavit různé barvy tlačítka, když na něj kliknete myší. Tento článek vysvětluje postup změny barvy tlačítka po kliknutí v CSS.
HTML
< centrum >< h1 > Změnit barvu tlačítka < / h1 >
< knoflík třída = 'knoflík' > Klikni na mě < / knoflík >
< / centrum >
Dále se přesuneme do CSS a stylizujeme tlačítko a aplikujeme na něj :active. Za tímto účelem nastavíme styl ohraničení jako „ žádný “ a zadejte výplň jako „ 15 pixelů “. Poté nastavte barvu textu tlačítka jako „ rgb(50, 0, 54) “ a jeho pozadí jako „ rgb(177, 110, 149) “ a jeho poloměr jako „ 15 pixelů “:
.knoflík {okraj : žádný ;
vycpávka : 15 pixelů ;
barva : rgb ( padesáti , 0 , 54 ) ;
barva pozadí : rgb ( 177 , 110 , 149 ) ;
hraniční poloměr : 15 pixelů ;
}
To ukáže následující výsledek:
Poté na tlačítko použijeme :active pseudo-class jako „ .tlačítko:aktivní “ a nastavte barvu tlačítka jako „ rgb(200, 255, 0) “:
.knoflík : aktivní {barva pozadí : rgb ( 200 , 255 , 0 ) ;
}
Jakmile implementujete veškerý výše uvedený kód, přejděte do souboru HTML a spusťte jej, abyste viděli výsledek:
Z výstupu lze pozorovat, že po kliknutí na tlačítko se jeho barva změní podle zadaného barevného kódu RGB.
Závěr
Chcete-li změnit barvu tlačítka po kliknutí v CSS, „ :aktivní ” lze použít pseudotřídu. Přesněji řečeno, může představovat prvek tlačítka, když je aktivován. Pomocí této třídy můžete nastavit různé barvy tlačítka, když na něj kliknete myší. Tento článek vysvětluje postup změny barvy tlačítka po kliknutí v CSS.