Gumb je temeljni del HTML-ja, ki opravlja različne naloge. Z uporabo CSS lahko oblikujete in oblikujete gumb. Obstajajo različni načini oblikovanja gumba, na primer barvanje gumba, spreminjanje velikosti, lebdenje in še veliko več.

V tem članku se bomo najprej naučili, kako ustvariti gumb, nato pa spremeniti barvo gumba, ko premaknete miškin kazalec.

Začnimo!

Kako spremeniti barvo gumba ob lebdenju v CSS?

V CSS, ' :lebdi ” se uporablja za spreminjanje barve gumba ob lebdenju. “ :lebdi ” je psevdorazred, ki omogoča spreminjanje vedenja elementov HTML, ko miško premaknete nanj, kot so elementi, kot so povezave, gumbi, slike in mnogi drugi.

Sintaksa :lebdi je na voljo spodaj.

Sintaksa

V zgoraj navedeni sintaksi ' a « se nanaša na element HTML, kjer je » :lebdi ”. V CSS lahko nastavite obnašanje lebdenja elementov HTML, kot so barva, velikost in širina elementa.

1. korak: Ustvarite Div in gumb

V HTML-ju bomo najprej ustvarili div in dodali naslov z

in gumb z uporabo oznake. Tu bomo gumbu dodelili ime razreda kot ' btn « in besedilo gumba kot » Lebdi name ”.

HTML

Rezultat zgoraj omenjene kode je podan spodaj. Vidite lahko, da sta naslov in gumb ustvarjena:

Zdaj se premaknite na CSS, da oblikujete div in gumb enega za drugim.

2. korak: Gumb za slog in Div

Najprej bomo oblikovali ustvarjeni vsebnik z uporabo ' div ”. Nato bomo višino diva nastavili kot ' 250 slikovnih pik « in barvo ozadja kot » rgb(199, 173, 192) ”. Lastnost border bomo uporabili tudi za prilagajanje roba diva, širino kot ' 5px ', slog kot ' trdna «, in barva kot » rgb(40, 2, 55) ”.

CSS

Spodnji izhod označuje, da je dodani slog uspešno uporabljen za div:

V naslednjem koraku bomo gumb oblikovali s CSS.

Zdaj bomo oblikovali gumb z uporabo ' .btn ” za dostop do gumba, ki je ustvarjen v HTML. Po tem bomo skrili obrobo gumba z nastavitvijo ' nič ” kot vrednost mejne lastnosti. Po tem bomo prilagodili velikost pisave na ' velik « in oblazinjenje gumba do » 10 slikovnih pik ”, da ustvarite presledke med vsebino gumba in robom gumba. Na koncu bomo nastavili barvo besedila in ozadja kot ' rgb(50, 0, 54) « in » rgb(193, 54, 135) ”:

Gumb je zdaj oblikovan:

Nadalje bomo uporabili ' :lebdi ”, če želite spremeniti barvo gumba ob lebdenju.

3. korak: Spremenite barvo gumba ob lebdenju

Zdaj bomo uporabili ' .btn:lebdenje ”, da povežete gumb z elementom psevdo razreda lebdenja. Posledično se na gumb uporabi lebdenje. Nato bomo nastavili barvo ozadja in barvo besedila gumba kot ' rgb(66, 2, 41) « in » rgb(119, 255, 0) ”. Te barve bodo uporabljene za gumb, ko miško premaknete nanj:

V spodnjem izpisu lahko vidite, da se barva gumba spremeni, ko nanj premaknete miško:

To je to! Razložili smo način spreminjanja barve gumba ob lebdenju s CSS.

Zaključek

Če želite spremeniti barvo gumba, ko lebdite, se :lebdi ” je uporabljen element psevdorazreda. To naredimo tako, da gumb povežemo z :hover in nastavimo barvo gumba, ki se bo spremenila, ko se bomo nanj pomaknili. V tem članku smo razložili način spreminjanja barve gumba ob lebdenju in navedli njegov primer.