Knap er et klikbart element, der bruges til at udføre en bestemt handling. Ved hjælp af CSS kan du indstille forskellige stilarter af knapper, en af dem er at ændre farven på en knap ved klik. Farven på en knap kan indstilles ved hjælp af CSS ' :aktiv ” pseudo-klasse.
Denne blog vil lære dig proceduren i forbindelse med at ændre knappens farve ved klik. For det første skal du lære om :active pseudo-klassen.
Så lad os begynde!
Hvad er ':active' i CSS?
Ændring af knapfarve ved klik i CSS er muligt ved hjælp af ' :aktiv ” pseudo-klasse. I HTML angiver det et element, der aktiveres, når brugeren klikker på det. Desuden, når du bruger en mus, starter aktiveringen, når der trykkes på musetasten.
Syntaks
-en : aktiv {
farve : grøn ;
}
“ -en ” refererer til HTML-elementet, som :active-klassen vil blive anvendt på.
Lad os gå mod et eksempel for at forstå det angivne koncept.
Hvordan ændres knapfarve ved klik i CSS?
For at ændre farven på en knap ved klik skal du først oprette en knap i en HTML-fil og tildele klassenavnet ' btn ”.
HTML
< legeme >< knap klasse = 'btn' > Knap < / knap >
< / legeme >
Indstil derefter farven på knappen i CSS. For at gøre det bruger vi ' .btn ' for at få adgang til knappen og indstille farven på knappen som ' rgb(0, 255, 213) ”.
CSS
.btn {baggrundsfarve : rgb ( 0 , 255 , 213 ) ;
}
Anvend derefter :active pseudo-class på knappen som ' .btn:aktiv ' og indstil farven på knappen, der vil blive vist i sin aktive tilstand som ' rgb(123, 180, 17) ”:
.btn : aktiv {baggrundsfarve : rgb ( 123 , 180 , 17 ) ;
}
Dette vil vise følgende resultat:
Lad os nu tilføje overskriften med
tag og knap klassenavn ' knap ”, inde i -tagget.
HTML
< centrum >
< h1 > Skift knapfarve < / h1 >
< knap klasse = 'knap' > Klik på Mig < / knap >
< / centrum >
Dernæst vil vi flytte til CSS og style knappen og anvende :active på den. For at gøre det vil vi indstille kantstilen som ' ingen ' og giv polstring som ' 15 px ”. Indstil derefter farven på knapteksten som ' rgb(50; 0; 54) ' og dens baggrund som ' rgb(177, 110, 149) ', og dens radius som ' 15 px ”:
.knap {
grænse : ingen ;
polstring : 15 px ;
farve : rgb ( halvtreds , 0 , 54 ) ;
baggrundsfarve : rgb ( 177 , 110 , 149 ) ;
grænse-radius : 15 px ;
}
Dette vil vise følgende resultat:
Derefter vil vi anvende :active pseudo-class på knappen som ' .knap:aktiv ' og indstil farven på en knap som ' rgb(200; 255; 0) ”:
.knap : aktiv {
baggrundsfarve : rgb ( 200 , 255 , 0 ) ;
}
Når du har implementeret al ovenstående kode, skal du gå til HTML-filen og udføre den for at tjekke resultatet:
Fra outputtet kan det ses, når der klikkes på knappen, dens farve ændres i henhold til den angivne RGB-farvekode.
Konklusion
For at ændre knapfarven ved klik i CSS, skal ' :aktiv ” pseudo-klasse kan bruges. Mere specifikt kan det repræsentere knapelementet, når det bliver aktiveret. Ved at bruge denne klasse kan du indstille forskellige knapfarver, når musen klikker på den. Denne artikel forklarede proceduren for at ændre knapfarve ved klik i CSS.
HTML
< centrum >< h1 > Skift knapfarve < / h1 >
< knap klasse = 'knap' > Klik på Mig < / knap >
< / centrum >
Dernæst vil vi flytte til CSS og style knappen og anvende :active på den. For at gøre det vil vi indstille kantstilen som ' ingen ' og giv polstring som ' 15 px ”. Indstil derefter farven på knapteksten som ' rgb(50; 0; 54) ' og dens baggrund som ' rgb(177, 110, 149) ', og dens radius som ' 15 px ”:
.knap {grænse : ingen ;
polstring : 15 px ;
farve : rgb ( halvtreds , 0 , 54 ) ;
baggrundsfarve : rgb ( 177 , 110 , 149 ) ;
grænse-radius : 15 px ;
}
Dette vil vise følgende resultat:
Derefter vil vi anvende :active pseudo-class på knappen som ' .knap:aktiv ' og indstil farven på en knap som ' rgb(200; 255; 0) ”:
.knap : aktiv {baggrundsfarve : rgb ( 200 , 255 , 0 ) ;
}
Når du har implementeret al ovenstående kode, skal du gå til HTML-filen og udføre den for at tjekke resultatet:
Fra outputtet kan det ses, når der klikkes på knappen, dens farve ændres i henhold til den angivne RGB-farvekode.
Konklusion
For at ændre knapfarven ved klik i CSS, skal ' :aktiv ” pseudo-klasse kan bruges. Mere specifikt kan det repræsentere knapelementet, når det bliver aktiveret. Ved at bruge denne klasse kan du indstille forskellige knapfarver, når musen klikker på den. Denne artikel forklarede proceduren for at ændre knapfarve ved klik i CSS.