En knap er en grundlæggende del af HTML, der udfører forskellige opgaver. Ved at bruge CSS kan du designe og style knappen. Der er forskellige måder at designe knappen på, såsom farvelægning af knappen, ændring af størrelse, svævning og mange flere.

I denne artikel vil vi først lære, hvordan du opretter en knap, og derefter ændrer farven på en knap, når du svæver.

Lad os komme igang!

Hvordan ændres knapfarve ved svæv i CSS?

I CSS, ' :hover ' bruges til at ændre knappens farve, når du svæver. “ :hover ” er en pseudo-klasse, der gør det muligt at ændre adfærden af ​​HTML-elementer, når en mus henover den, såsom elementer som links, knapper, billeder og mange flere.

Syntaksen af :hover er angivet nedenfor.

Syntaks

I den ovenfor angivne syntaks, ' -en ' refererer til HTML-elementet, hvor ' :hover ” anvendes. I CSS kan du indstille HTML-elementernes svæveadfærd, såsom elementets farve, størrelse og bredde.

Trin 1: Opret Div og knap

I HTML'en vil vi først oprette en div og tilføje en overskrift med

og en knap ved hjælp af et tag. Her vil vi tildele knappens klassenavn som ' btn ' og knappen tekst som ' Hold musen over mig ”.

HTML

Resultatet af ovennævnte kode er angivet nedenfor. Du kan se, at overskriften og knappen er oprettet:

Gå nu til CSS for at style div'en og knappen en efter en.

Trin 2: Style-knap og Div

Først vil vi style den oprettede container ved at bruge ' div ”. Derefter vil vi indstille højden af ​​div'en som ' 250 px ' og baggrundsfarven som ' rgb(199, 173, 192) ”. Vi vil også bruge grænseegenskaben til at justere grænsen for div, bredde som ' 5 px ', stil som ' solid ', og farve som ' rgb(40, 2, 55) ”.

CSS

Nedenstående output indikerer, at den tilføjede stil er blevet anvendt på div'en:

I næste trin vil vi style knappen ved hjælp af CSS.

Nu vil vi style knappen ved at bruge ' .btn ” for at få adgang til knappen, som er oprettet i HTML. Derefter skjuler vi knappens kant ved at indstille ' ingen ” som grænseegenskabsværdien. Derefter vil vi justere skriftstørrelsen til ' stor ' og udfyldningen af ​​knappen til ' 10px ” for at skabe mellemrum mellem indholdet af knappen og kanten af ​​knappen. I sidste ende vil vi indstille farven på teksten og baggrunden som ' rgb(50; 0; 54) ' og ' rgb(193, 54, 135) ”:

Knappen er nu stylet op:

Yderligere vil vi anvende ' :hover ” for at ændre farven på en knap, når du svæver.

Trin 3: Skift knapfarve ved svæv

Nu vil vi bruge ' .btn:hover ” for at forbinde knappen med hover pseudo-klasse-elementet. Som et resultat vil svævemarkøren blive anvendt på knappen. Dernæst vil vi indstille baggrundsfarven og tekstfarven på knappen som ' rgb(66, 2, 41) ' og ' rgb(119, 255, 0) ”. Disse farver vil blive anvendt på knappen, når en mus henover den:

I nedenstående output kan du se, at farven på knappen ændres, når en mus svæver på den:

Det er det! Vi har forklaret metoden til at ændre knapfarven ved svævning ved hjælp af CSS.

Konklusion

For at ændre farven på en knap, når du svæver, skal du ' :hover ” pseudo-klasse element bruges. For at gøre det skal du forbinde knappen med :hover og indstille farven på knappen, som ændres, når vi svæver på den. I denne artikel har vi forklaret metoden til at ændre farven på knappen ved svævning og givet et eksempel på det.