En knapp er en grunnleggende del av HTML som utfører forskjellige oppgaver. Ved å bruke CSS kan du designe og style knappen. Det er forskjellige måter å designe knappen, for eksempel å fargelegge knappen, endre størrelse, sveve og mange flere.

I denne artikkelen vil vi først lære hvordan du oppretter en knapp, og endrer deretter fargen på en knapp på svevet.

La oss komme i gang!

Hvordan du endrer knappfarge på svevet i CSS?

I CSS, “:sveve”Brukes til å endre knappens farge på svevet. “:sveve”Er en pseudoklasse som tillater å endre oppførselen til HTML-elementene når en mus over den, for eksempel elementer som lenker, knapper, bilder og mange flere.

Syntaksen til :sveve er gitt nedenfor.

Syntaks

I syntaks ovenfor, "en”Refererer til HTML -elementet der“:sveve" blir brukt. I CSS kan du angi hoveroppførselen til HTML -elementene, for eksempel elementets farge, størrelse og bredde.

Trinn 1: Opprett div og knapp

I HTML vil vi først lage en div og legge til en overskrift med

og en knapp ved hjelp av en tag. Her tildeler vi klassenavnet på knappen som "btn”Og knappeteksten som“Sveve på meg”.

Html

Utfallet av den ovennevnte koden er gitt nedenfor. Du kan se at overskriften og knappen er opprettet:

Gå nå til CSS for å style div og knapp en etter en.

Trinn 2: Stilknapp og div

Først vil vi style den opprettede containeren ved å bruke “div”. Deretter vil vi sette høyden på divet som “250px”Og bakgrunnsfargen som“RGB (199, 173, 192)”. Vi vil også bruke grenseegenskapen for å justere grensen til div, bredde som "5px”, Stil som“fast”, Og farge som“RGB (40, 2, 55)”.

CSS

Den undergitte utgangen indikerer at den ekstra stilen blir brukt på Div:

I neste trinn vil vi style knappen ved hjelp av CSS.

Nå vil vi style knappen ved å bruke ".btn”For å få tilgang til knappen som er opprettet i HTML. Etter det vil vi skjule knappens grense ved å sette "ingen”Som grensegenskapsverdi. Etter det vil vi justere skriftstørrelsen til “stor”Og polstring av knappen til“10px”For å lage mellomrom mellom innholdet i knappen og grensen til knappen. Til slutt vil vi sette fargen på teksten og bakgrunnen som "RGB (50, 0, 54)”Og“RGB (193, 54, 135)”:

Knappen er nå stylet opp:

Videre vil vi søke “:sveve”For å endre fargen på en knapp på svevet.

Trinn 3: Endre knappfarge på svevet

Nå vil vi bruke “.BTN: Hopp”For å koble knappen med Hover Pseudoklasselementet. Som et resultat vil svevet bli brukt på knappen. Deretter vil vi angi bakgrunnsfarge og tekstfarge på knappen som "RGB (66, 2, 41)”Og“RGB (119, 255, 0)”. Disse fargene blir brukt på knappen når en mus over den:

I utdataene under levert kan du se at fargen på knappen endres når en mus svever på den:

Det er det! Vi har forklart metoden for å endre knappfargen på Hover ved hjelp av CSS.

Konklusjon

For å endre fargen på en knapp på svevet, ":sveve”Pseudoklasse element brukes. For å gjøre det, kobler du knappen med: Hold og angi fargen på knappen, som vil endres når vi vil sveve på den. I denne artikkelen har vi forklart metoden for å endre fargen på knappen på svevet og gitt et eksempel på den.