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

I denne artikkelen vil vi først lære hvordan du lager en knapp, og deretter endrer fargen på en knapp når du peker.

La oss komme i gang!

Hvordan endre knappefarge på hover i CSS?

I CSS, ' :sveve ' brukes til å endre fargen på knappen når du svever. ' :sveve ” er en pseudo-klasse som gjør det mulig å endre atferden til HTML-elementene når en musepeker over den, for eksempel elementer som lenker, knapper, bilder og mange flere.

Syntaksen til :sveve er gitt nedenfor.

Syntaks

I den ovenfor angitte syntaksen, ' en ' refererer til HTML-elementet der ' :sveve ' blir brukt. I CSS kan du angi sveveoppførselen til HTML-elementene, for eksempel elementets farge, størrelse og bredde.

Trinn 1: Lag Div og knapp

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

og en knapp ved hjelp av en tag. Her vil vi tildele klassenavnet til knappen som ' btn ' og knappen tekst som ' Hold musepekeren 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 knappen én etter én.

Trinn 2: Stilknapp og Div

Først vil vi style den opprettede beholderen ved å bruke ' div '. Deretter vil vi sette høyden på div som ' 250 piksler ' og bakgrunnsfargen som ' rgb(199, 173, 192) '. Vi vil også bruke grenseegenskapen for å justere grensen til div, bredde som ' 5 px ', stil som ' fast ', og farge som ' rgb(40; 2; 55) '.

CSS

Utdataene nedenfor indikerer at stilen som er lagt til, er vellykket brukt på div:

I neste trinn vil vi style knappen med CSS.

Nå vil vi style knappen med ' .btn ' for å få tilgang til knappen som er opprettet i HTML. Etter det vil vi skjule knappens kant ved å sette ' ingen ” som grenseegenskapsverdien. Etter det vil vi justere skriftstørrelsen til ' stor ' og polstringen på knappen til ' 10 piksler ” for å lage mellomrom mellom innholdet på knappen og kanten på knappen. Til slutt vil vi sette fargen på teksten og bakgrunnen som ' rgb(50; 0; 54) ' og ' rgb(193, 54, 135) ':

Knappen er nå stilt opp:

Videre vil vi søke ' :sveve ' for å endre fargen på en knapp når du peker.

Trinn 3: Endre knappefarge ved sveve

Nå skal vi bruke ' .btn:hover ” for å koble knappen med hover pseudo-klasse-elementet. Som et resultat vil svevingen bli brukt på knappen. Deretter vil vi sette bakgrunnsfargen og tekstfargen på knappen som ' rgb(66, 2, 41) ' og ' rgb(119; 255; 0) '. Disse fargene vil bli brukt på knappen når en musepeker over den:

I utgangen nedenfor kan du se at fargen på knappen endres når en mus svever på den:

Det er det! Vi har forklart metoden for å endre knappefargen ved å sveve ved hjelp av CSS.

Konklusjon

For å endre fargen på en knapp når du peker, :sveve ” pseudoklasseelement brukes. For å gjøre det, koble knappen med :hover og angi fargen på knappen, som vil endres når vi holder musepekeren på den. I denne artikkelen har vi forklart metoden for å endre fargen på knappen ved sveving og gitt et eksempel på det.