Przycisk to podstawowa część HTML, która wykonuje różne zadania. Korzystając z CSS, możesz zaprojektować i stylizować przycisk. Istnieją różne sposoby projektowania przycisku, takie jak kolorowanie przycisku, zmiana rozmiaru, najeżdżanie i wiele innych.

W tym artykule najpierw dowiemy się, jak utworzyć przycisk, a następnie zmienić kolor przycisku po najechaniu kursorem.

Zacznijmy!

Jak zmienić kolor przycisku po najechaniu w CSS?

W CSS „ :unosić się ” służy do zmiany koloru przycisku po najechaniu myszą. “ :unosić się ” to pseudoklasa, która umożliwia zmianę zachowania elementów HTML po najechaniu na nie myszą, takich jak linki, przyciski, obrazy i wiele innych.

Składnia :unosić się znajduje się poniżej.

Składnia

W powyższej składni „ a ” odnosi się do elementu HTML, w którym element „ :unosić się ”. W CSS możesz ustawić zachowanie najeżdżania elementów HTML, takie jak kolor, rozmiar i szerokość elementu.

Krok 1: Utwórz element Div i przycisk

W kodzie HTML najpierw utworzymy div i dodamy nagłówek z

oraz przycisk za pomocą tagu. Tutaj przypiszemy nazwę klasy przycisku jako „ btn ” i tekst przycisku jako „ Najedź na mnie ”.

HTML

Wynik działania ww. kodu znajduje się poniżej. Możesz zobaczyć, że nagłówek i przycisk zostały utworzone:

Teraz przejdź do CSS, aby stylizować div i button jeden po drugim.

Krok 2: Przycisk Styl i Div

Najpierw stylizujemy utworzony kontener za pomocą „ div ”. Następnie ustawimy wysokość div jako „ 250px ” i kolor tła jako „ rgb(199, 173, 192) ”. Użyjemy również właściwości border, aby dostosować obramowanie elementu div, szerokość jako „ 5px ”, styl jako „ solidny ” i pokoloruj jako „ RGB(40, 2, 55) ”.

CSS

Podane poniżej dane wyjściowe wskazują, że dodany styl został pomyślnie zastosowany w div:

W następnym kroku stylizujemy przycisk za pomocą CSS.

Teraz stylizujemy przycisk za pomocą „ .btn ”, aby uzyskać dostęp do przycisku utworzonego w HTML. Następnie ukryjemy obramowanie przycisku, ustawiając „ Żaden ” jako graniczna wartość nieruchomości. Następnie dostosujemy rozmiar czcionki do „ wielki ” i wypełnienie przycisku do „ 10px ”, aby utworzyć spacje między zawartością przycisku a obramowaniem przycisku. Na koniec ustawimy kolor tekstu i tła jako „ RGB (50, 0, 54) ' oraz ' rgb(193, 54, 135) ”:

Przycisk ma teraz nowy styl:

Ponadto zastosujemy „ :unosić się ”, aby zmienić kolor przycisku po najechaniu myszą.

Krok 3: Zmień kolor przycisku po najechaniu kursorem

Teraz użyjemy „ .btn:najedź ”, aby połączyć przycisk z elementem pseudoklasy hover. W rezultacie na przycisk zostanie zastosowany wskaźnik myszy. Następnie ustawimy kolor tła i kolor tekstu przycisku jako „ rgb(66, 2, 41) ' oraz ' rgb(119, 255, 0) ”. Te kolory zostaną zastosowane do przycisku po najechaniu na niego myszą:

Na poniższym wyjściu widać, że kolor przycisku zmienia się po najechaniu na niego myszą:

Otóż ​​to! Wyjaśniliśmy metodę zmiany koloru przycisku po najechaniu kursorem za pomocą CSS.

Wniosek

Aby zmienić kolor przycisku po najechaniu kursorem, „ :unosić się ” używany jest element pseudoklasy. Aby to zrobić, połącz przycisk z :hover i ustaw kolor przycisku, który zmieni się, gdy na niego najedziemy. W tym artykule wyjaśniliśmy metodę zmiany koloru przycisku po najechaniu kursorem i podaliśmy przykład.