Przycisk jest elementem klikalnym używanym do wykonywania określonej akcji. Korzystając z CSS, możesz ustawić różne style przycisków jednym z nich jest zmiana koloru przycisku przy kliknięciu. Kolor przycisku można ustawić za pomocą CSS ”:aktywny„Pseudoklasa.

Ten blog nauczy Cię procedury związanej ze zmianą koloru przycisku po kliknięciu. Po pierwsze, dowiedz się o: aktywnej pseudoklice.

Więc zacznijmy!

Co to jest „: aktywny” w CSS?

Zmiana koloru przycisku przy kliknięciu w CSS jest możliwa z pomocą „:aktywny„Pseudoklasa. W HTML wskazuje element, który jest aktywowany, gdy użytkownik go kliknie. Ponadto podczas korzystania z myszy aktywacja zaczyna się po naciśnięciu klawisza myszy.

Składnia

A: Active
Zielony kolor;

"A”Odnosi się do elementu HTML, na którym zostanie zastosowana klasa:.

Udajmy się do przykładu, aby zrozumieć określoną koncepcję.

Jak zmienić kolor przycisku przy kliknięciu w CSS?

Aby zmienić kolor przycisku przy kliknięciu, najpierw utwórz przycisk w pliku HTML i przypisz nazwę klasy „Btn".

Html

Przycisk

Następnie w CSS ustaw kolor przycisku. Aby to zrobić, użyjemy „.Btn”Aby uzyskać dostęp do przycisku i ustawić kolor przycisku jako„RGB (0, 255, 213)".

CSS

.btn
kolor tła: RGB (0, 255, 213);

Następnie Złóż wniosek: aktywna pseudoklasa na przycisku jako „.BTN: Active”I ustaw kolor przycisku, który wyświetli się w stanie aktywnym jako„RGB (123, 180, 17)”:

.BTN: Active
kolor tła: RGB (123, 180, 17);

To pokaże następujący wynik:

Teraz dodajmy nagłówek

Nazwa klasy tagu i przycisku „przycisk”, Wewnątrz znacznika.

Html

Zmień kolor przycisku

Kliknij

Następnie przejdziemy do CSS i stylizujemy przycisk i zastosujemy: aktywny na nim. Aby to zrobić, ustawimy styl graniczny jako „nic”I daj wyściółkę jako„15px". Następnie ustaw kolor tekstu przycisku jako „RGB (50, 0, 54)”I jego tło jako„RGB (177, 110, 149)”, A jego promień jako„15px”:

.przycisk
Border: Brak;
Wyściółka: 15px;
Kolor: RGB (50, 0, 54);
kolor tła: RGB (177, 110, 149);
RADIUS BERDER: 15px;

To pokaże następujący wynik:

Następnie zastosujemy: aktywna pseudoklasa na przycisku jako „.Przycisk: Active”I ustaw kolor przycisku jako„RGB (200, 255, 0)”:

.przycisk: Active
kolor tła: RGB (200, 255, 0);

Po wdrożeniu wszystkich powyższych kodów przejdź do pliku HTML i wykonaj go, aby sprawdzić wynik:

Z wyjścia można go zaobserwować, gdy przycisk zostanie kliknięty, jego kolor zostanie zmieniony zgodnie z określonym kodem kolorów RGB.

Wniosek

Aby zmienić kolor przycisku przy kliknięciu w CSS, „:aktywny„Można użyć pseudoklasy. Mówiąc dokładniej, może reprezentować element przycisku, gdy zostanie aktywowany. Korzystając z tej klasy, możesz ustawić różne kolory przycisków, gdy mysz kliknie na nią. W tym artykule wyjaśniono procedurę zmiany koloru przycisku po kliknięciu w CSS.