Przycisk jest podstawową częścią HTML, która wykonuje różne zadania. Korzystając z CSS, możesz zaprojektować i stylizować przycisk. Istnieją różne sposoby zaprojektowania przycisku, takie jak kolorowanie przycisku, rozmiar, unoszenie i wiele innych.

W tym artykule najpierw dowiemy się, jak utworzyć przycisk, a następnie zmienimy kolor przycisku na zawisie.

Zacznijmy!

Jak zmienić kolor przycisku na zawisie w CSS?

W CSS „:unosić się”Służy do zmiany koloru przycisku na zawisie. ":unosić się”Jest pseudoklową, która umożliwia zmianę zachowania elementów HTML, gdy mysz się na niej nadchodzi, takich jak elementy takie jak linki, przyciski, obrazy i wiele innych.

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

Składnia

W powyższej składni „A”Odnosi się do elementu HTML, w którym„:unosić się”Jest stosowany. W CSS możesz ustawić zachowanie zawisowe elementów HTML, takich jak kolor, rozmiar i szerokość elementu.

Krok 1: Utwórz Div i przycisk

W HTML najpierw utworzymy div i dodamy nagłówek

i przycisk za pomocą znacznika. Tutaj przypisamy nazwę klasy przycisku jako „Btn”I tekst przycisku jako„Unosić się na mnie".

Html

Wynik wyżej wymienionego kodu podano poniżej. Widać, że nagłówek i przycisk są tworzone:

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

Krok 2: przycisk stylu i div

Najpierw stylizujemy utworzony pojemnik, używając „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 granicznej, aby dostosować granicę div, szerokość jako „5px”, Styl jako„solidny”, I kolor jako„RGB (40, 2, 55)".

CSS

Poniższe dane wyjściowe wskazuje, że dodany styl jest z powodzeniem stosowany 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 granicę przycisku, ustawiając „nic”Jako wartość nieruchomości granicznej. Następnie dostosujemy rozmiar czcionki do „duży”I wyściółka przycisku do„10px„Aby utworzyć przestrzenie między zawartością przycisku a granicą przycisku. Ostatecznie ustawimy kolor tekstu i tła jako „RGB (50, 0, 54)" I "RGB (193, 54, 135)”:

Przycisk jest teraz stylizowany:

Ponadto będziemy złożyć wniosek „:unosić się„Aby zmienić kolor przycisku na zawisie.

Krok 3: Zmień kolor przycisku na zawisie

Teraz użyjemy „.BTN: Hover„Aby połączyć przycisk z pseudoklasą zawisową. W rezultacie nacisk zostanie zastosowany do przycisku. Następnie ustawimy kolor tła i kolor tekstu przycisku jako „RGB (66, 2, 41)" I "RGB (119, 255, 0)". Te kolory zostaną nałożone na przycisk, gdy mysz się na nim nadejdzie:

W podwładnym wyjściu widać, że kolor przycisku jest zmieniany, gdy na nim zawisł mysz:

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

Wniosek

Aby zmienić kolor przycisku na zawisie, „:unosić się„Używana jest pseudokliczna element. Aby to zrobić, połącz przycisk z: Włóż i ustaw kolor przycisku, który zmieni się, gdy na nim unosimy. W tym artykule wyjaśniliśmy metodę zmiany koloru przycisku na zawisie i podaliśmy jej przykład.