Knapp er et klikkbart element som brukes til å utføre en bestemt handling. Ved å bruke CSS kan du angi forskjellige knapper. En av dem er å endre fargen på en knapp ved klikk. Fargen på en knapp kan stilles inn ved hjelp av CSS ' :aktiv ” pseudo-klasse.
Denne bloggen vil lære deg prosedyren knyttet til å endre knappefargen ved klikk. For dette, for det første, lær om :active pseudo-klassen.
Så la oss begynne!
Hva er ':active' i CSS?
Endre knappefarge ved klikk i CSS er mulig ved hjelp av ' :aktiv ” pseudo-klasse. I HTML indikerer det et element som aktiveres når brukeren klikker på det. Dessuten, når du bruker en mus, starter aktiveringen når musetasten trykkes.
Syntaks
en : aktiv {
farge : grønn ;
}
' en ” refererer til HTML-elementet som :active-klassen skal brukes på.
La oss gå mot et eksempel for å forstå det uttalte konseptet.
Hvordan endre knappefarge ved klikk i CSS?
For å endre fargen på en knapp ved klikk, lag først en knapp i en HTML-fil og tilordne klassenavnet ' btn '.
HTML
< kropp >< knapp klasse = 'btn' > Knapp < / knapp >
< / kropp >
Deretter, i CSS, angi fargen på knappen. For å gjøre det bruker vi ' .btn ' for å få tilgang til knappen og angi fargen på knappen som ' rgb(0, 255, 213) '.
CSS
.btn {bakgrunnsfarge : rgb ( 0 , 255 , 213 ) ;
}
Etter det, bruk :active pseudo-class på knappen som ' .btn:aktiv ' og angi fargen på knappen som skal vises i aktiv tilstand som ' rgb(123; 180; 17) ':
.btn : aktiv {bakgrunnsfarge : rgb ( 123 , 180 , 17 ) ;
}
Dette vil vise følgende utfall:
La oss nå legge til overskriften med
-taggen og knappens klassenavn ' knapp ”, inne i -taggen.
HTML
< senter >
< h1 > Endre knappfarge < / h1 >
< knapp klasse = 'knapp' > Klikk på meg < / knapp >
< / senter >
Deretter vil vi flytte til CSS og style knappen og bruke :active på den. For å gjøre det, vil vi sette kantstilen som ' ingen ' og gi utfylling som ' 15 piksler '. Deretter setter du fargen på knappeteksten som ' rgb(50; 0; 54) ' og bakgrunnen som ' rgb(177, 110, 149) ', og dens radius som ' 15 piksler ':
.knapp {
grense : ingen ;
polstring : 15 piksler ;
farge : rgb ( femti , 0 , 54 ) ;
bakgrunnsfarge : rgb ( 177 , 110 , 149 ) ;
grense-radius : 15 piksler ;
}
Dette vil vise følgende utfall:
Etter det vil vi bruke :active pseudo-class på knappen som ' .knapp:aktiv ' og angi fargen på en knapp som ' rgb(200; 255; 0) ':
.knapp : aktiv {
bakgrunnsfarge : rgb ( 200 , 255 , 0 ) ;
}
Når du har implementert all koden ovenfor, gå til HTML-filen og kjør den for å sjekke ut resultatet:
Fra utgangen kan det observeres når knappen klikkes, fargen endres i henhold til den angitte RGB-fargekoden.
Konklusjon
For å endre knappefargen ved å klikke i CSS, ' :aktiv ” pseudo-klasse kan brukes. Mer spesifikt kan det representere knappeelementet når det blir aktivert. Ved å bruke denne klassen kan du angi forskjellige knappefarger når musen klikker på den. Denne artikkelen forklarte prosedyren for å endre knappefarge ved klikk i CSS.
HTML
< senter >< h1 > Endre knappfarge < / h1 >
< knapp klasse = 'knapp' > Klikk på meg < / knapp >
< / senter >
Deretter vil vi flytte til CSS og style knappen og bruke :active på den. For å gjøre det, vil vi sette kantstilen som ' ingen ' og gi utfylling som ' 15 piksler '. Deretter setter du fargen på knappeteksten som ' rgb(50; 0; 54) ' og bakgrunnen som ' rgb(177, 110, 149) ', og dens radius som ' 15 piksler ':
.knapp {grense : ingen ;
polstring : 15 piksler ;
farge : rgb ( femti , 0 , 54 ) ;
bakgrunnsfarge : rgb ( 177 , 110 , 149 ) ;
grense-radius : 15 piksler ;
}
Dette vil vise følgende utfall:
Etter det vil vi bruke :active pseudo-class på knappen som ' .knapp:aktiv ' og angi fargen på en knapp som ' rgb(200; 255; 0) ':
.knapp : aktiv {bakgrunnsfarge : rgb ( 200 , 255 , 0 ) ;
}
Når du har implementert all koden ovenfor, gå til HTML-filen og kjør den for å sjekke ut resultatet:
Fra utgangen kan det observeres når knappen klikkes, fargen endres i henhold til den angitte RGB-fargekoden.
Konklusjon
For å endre knappefargen ved å klikke i CSS, ' :aktiv ” pseudo-klasse kan brukes. Mer spesifikt kan det representere knappeelementet når det blir aktivert. Ved å bruke denne klassen kan du angi forskjellige knappefarger når musen klikker på den. Denne artikkelen forklarte prosedyren for å endre knappefarge ved klikk i CSS.