Knappen er et klikkbart element som brukes til å utføre en spesifikk handling. Ved hjelp av CSS kan du angi forskjellige stiler med knapper. En av dem er å endre fargen på en knapp på klikk. Fargen på en knapp kan settes ved hjelp av CSS “:aktiv”Pseudoklasse.

Denne bloggen vil lære deg prosedyren relatert til å endre knappfargen på klikk. For det første, lær om: Aktiv pseudoklasse.

Så la oss begynne!

Hva er “: Aktiv” i CSS?

Endring av knappfarge på klikk i CSS er mulig ved hjelp av ":aktiv”Pseudoklasse. I HTML indikerer det et element som aktiveres når brukeren klikker på det. Når du bruker en mus, starter aktiveringen dessuten når musetasten trykkes.

Syntaks

A: aktiv
Farge: grønn;

“en”Henviser til HTML -elementet som: Aktiv klasse vil bli brukt.

La oss ta turen mot et eksempel for å forstå det uttalte konseptet.

Hvordan endre knappfarge på klikk i CSS?

For å endre fargen på en knapp på klikk, oppretter du først en knapp i en HTML -fil og tilordner klassenavnet "btn”.

Html

Knapp

Neste, i CSS, angi fargen på knappen. For å gjøre det, vil vi bruke “.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: Aktiv pseudoklasse på knappen som ".BTN: Aktiv”Og angi fargen på knappen som vil vise i sin aktive 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

Tag og knappeklassenavn "knapp”, Inne i taggen.

Html

Endre knappfarge

Klikk på meg

Deretter vil vi flytte til CSS og style knappen og bruke: aktiv på den. For å gjøre det, vil vi sette grensestilen som “ingen”Og gi polstring som“15px”. Sett deretter fargen på knappeteksten som "etter det" som "RGB (50, 0, 54)”Og dens bakgrunn som“RGB (177, 110, 149)”, Og dens radius som“15px”:

.knapp
Grense: Ingen;
polstring: 15px;
Farge: RGB (50, 0, 54);
bakgrunnsfarge: RGB (177, 110, 149);
Border-Radius: 15px;

Dette vil vise følgende utfall:

Etter det vil vi søke: aktiv pseudoklasse 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 ovennevnte kode, kan du gå til HTML -filen og utføre den for å sjekke resultatet:

Fra utgangen kan det observeres når knappen er klikket på fargen, endres i henhold til den spesifiserte RGB -fargekoden.

Konklusjon

For å endre knappfargen på klikk i CSS, “:aktiv”Pseudoklasse kan brukes. Mer spesifikt kan det representere knappelementet når det blir aktivert. Ved hjelp av denne klassen kan du angi forskjellige knappfarger når musen klikker på den. Denne artikkelen forklarte prosedyren for endring av knappfarge på klikk i CSS.