Gumb je temeljni dio HTML-a koji obavlja različite zadatke. Pomoću CSS-a možete dizajnirati i stilizirati gumb. Postoje različiti načini dizajniranja gumba, poput bojanja gumba, promjene veličine, lebdenja i još mnogo toga.

U ovom ćemo članku prvo naučiti kako izraditi gumb, a zatim promijeniti boju gumba pri lebdenju.

Započnimo!

Kako promijeniti boju gumba pri lebdenju u CSS-u?

U CSS-u, ' :lebdjeti ” koristi se za promjenu boje gumba pri lebdenju. “ :lebdjeti ” je pseudo-klasa koja omogućuje promjenu ponašanja HTML elemenata kada mišem prijeđete na njih, kao što su elementi poput poveznica, gumba, slika i mnogih drugih.

Sintaksa :lebdjeti nalazi se u nastavku.

Sintaksa

U gore navedenoj sintaksi, ' a ” odnosi se na HTML element gdje je „ :lebdjeti ' je primijenjen. U CSS-u možete postaviti ponašanje lebdenja HTML elemenata, poput boje, veličine i širine elementa.

Korak 1: Stvorite Div i gumb

U HTML-u, prvo ćemo stvoriti div i dodati naslov s

i gumb pomoću oznake. Ovdje ćemo dodijeliti naziv klase gumba kao ' btn ” i tekst gumba kao “ Lebdi na meni ”.

HTML

Ishod gore navedenog koda dan je u nastavku. Možete vidjeti da su naslov i gumb stvoreni:

Sada prijeđite na CSS da stilizirate div i gumb jedan po jedan.

Korak 2: Gumb za stil i Div

Prvo ćemo stilizirati stvoreni spremnik pomoću ' div ”. Zatim ćemo postaviti visinu diva kao ' 250 px ', a boja pozadine kao ' rgb(199, 173, 192) ”. Također ćemo koristiti svojstvo border za podešavanje granice diva, širine kao ' 5 px ', stil kao ' čvrsta ', a boja kao ' rgb(40, 2, 55) ”.

CSS

Donji rezultat pokazuje da je dodani stil uspješno primijenjen na div:

U sljedećem koraku stilizirat ćemo gumb pomoću CSS-a.

Sada ćemo oblikovati gumb koristeći ' .btn ” za pristup gumbu koji je stvoren u HTML-u. Nakon toga ćemo sakriti obrub gumba postavljanjem ' nikakav ” kao graničnu vrijednost svojstva. Nakon toga prilagodit ćemo veličinu fonta na ' velika ” i postavljanje gumba na “ 10 px ” za stvaranje razmaka između sadržaja gumba i ruba gumba. Na kraju ćemo postaviti boju teksta i pozadine kao ' rgb(50, 0, 54) ' i ' rgb(193, 54, 135) ”:

Gumb je sada stiliziran:

Nadalje, primjenjivat ćemo “ :lebdjeti ” za promjenu boje gumba dok lebdite.

Korak 3: promijenite boju gumba pri lebdenju

Sada ćemo koristiti ' .btn:lebdjeti ” za povezivanje gumba s elementom lebdeće pseudoklase. Kao rezultat toga, na gumb će se primijeniti lebdeći pokazivač. Zatim ćemo postaviti boju pozadine i boju teksta gumba kao ' rgb(66, 2, 41) ' i ' rgb(119, 255, 0) ”. Ove boje će se primijeniti na gumb kada mišem prijeđete preko njega:

U donjem izlazu možete vidjeti da se boja gumba mijenja kada mišem prijeđete na njega:

To je to! Objasnili smo metodu za promjenu boje gumba pri lebdenju pomoću CSS-a.

Zaključak

Da biste promijenili boju gumba dok lebdite, ' :lebdjeti ” koristi se element pseudoklase. Da biste to učinili, povežite gumb s :hover i postavite boju gumba koja će se promijeniti kada lebdimo na njemu. U ovom smo članku objasnili metodu za promjenu boje gumba pri lebdenju i dali primjer toga.