Knapp är ett klickbart element som används för att utföra en specifik åtgärd. Med CSS kan du ställa in olika stilar på knappar, en av dem är att ändra färgen på en knapp vid klick. Färgen på en knapp kan ställas in med CSS ' :aktiva ” pseudoklass.
Den här bloggen kommer att lära dig proceduren för att ändra knappfärgen vid klick. För detta, först, lär dig om :active pseudo-klassen.
Så, låt oss börja!
Vad är ':active' i CSS?
Ändra knappfärg vid klick i CSS är möjligt med hjälp av ' :aktiva ” pseudoklass. I HTML indikerar det ett element som aktiveras när användaren klickar på det. Dessutom, när du använder en mus, startar aktiveringen när musknappen trycks ned.
Syntax
a : aktiva {
Färg : grön ;
}
' a ” refererar till HTML-elementet på vilket klassen :active kommer att tillämpas.
Låt oss gå mot ett exempel för att förstå det angivna konceptet.
Hur ändrar man knappfärg vid klick i CSS?
För att ändra färgen på en knapp vid klick, skapa först en knapp i en HTML-fil och tilldela klassnamnet ' btn ”.
HTML
< kropp >< knapp klass = 'btn' > Knapp < / knapp >
< / kropp >
Ställ sedan in färgen på knappen i CSS. För att göra det kommer vi att använda ' .btn ' för att komma åt knappen och ställ in färgen på knappen som ' rgb(0, 255, 213) ”.
CSS
.btn {bakgrundsfärg : rgb ( 0 , 255 , 213 ) ;
}
Efter det, applicera :active pseudo-class på knappen som ' .btn:active ' och ställ in färgen på knappen som ska visas i sitt aktiva läge som ' rgb(123, 180, 17) ”:
.btn : aktiva {bakgrundsfärg : rgb ( 123 , 180 , 17 ) ;
}
Detta kommer att visa följande resultat:
Nu, låt oss lägga till rubriken med
-taggen och knappens klassnamn ' knapp ”, inuti -taggen.
HTML
< Centrum >
< h1 > Ändra knappfärg < / h1 >
< knapp klass = 'knapp' > Klicka här < / knapp >
< / Centrum >
Därefter flyttar vi till CSS och stylar knappen och applicerar :active på den. För att göra det kommer vi att ställa in kantstilen som ' ingen ' och ge utfyllnad som ' 15 px ”. Efter det, ställ in färgen på knapptexten som ' rgb(50; 0; 54) ' och dess bakgrund som ' rgb(177, 110, 149) ', och dess radie som ' 15 px ”:
.knapp {
gräns : ingen ;
stoppning : 15 px ;
Färg : rgb ( femtio , 0 , 54 ) ;
bakgrundsfärg : rgb ( 177 , 110 , 149 ) ;
gränsradie : 15 px ;
}
Detta kommer att visa följande resultat:
Efter det kommer vi att tillämpa :active pseudo-class på knappen som ' .knapp:aktiv ' och ställ in färgen på en knapp som ' rgb(200, 255, 0) ”:
.knapp : aktiva {
bakgrundsfärg : rgb ( 200 , 255 , 0 ) ;
}
När du har implementerat all ovanstående kod, gå till HTML-filen och kör den för att kolla resultatet:
Från utgången kan det observeras när du klickar på knappen dess färg ändras enligt den specificerade RGB-färgkoden.
Slutsats
För att ändra knappfärgen när du klickar i CSS, ' :aktiva ” pseudoklass kan användas. Mer specifikt kan det representera knappelementet när det aktiveras. Med den här klassen kan du ställa in olika knappfärger när musen klickar på den. Den här artikeln förklarade proceduren för att ändra knappfärg vid klick i CSS.
HTML
< Centrum >< h1 > Ändra knappfärg < / h1 >
< knapp klass = 'knapp' > Klicka här < / knapp >
< / Centrum >
Därefter flyttar vi till CSS och stylar knappen och applicerar :active på den. För att göra det kommer vi att ställa in kantstilen som ' ingen ' och ge utfyllnad som ' 15 px ”. Efter det, ställ in färgen på knapptexten som ' rgb(50; 0; 54) ' och dess bakgrund som ' rgb(177, 110, 149) ', och dess radie som ' 15 px ”:
.knapp {gräns : ingen ;
stoppning : 15 px ;
Färg : rgb ( femtio , 0 , 54 ) ;
bakgrundsfärg : rgb ( 177 , 110 , 149 ) ;
gränsradie : 15 px ;
}
Detta kommer att visa följande resultat:
Efter det kommer vi att tillämpa :active pseudo-class på knappen som ' .knapp:aktiv ' och ställ in färgen på en knapp som ' rgb(200, 255, 0) ”:
.knapp : aktiva {bakgrundsfärg : rgb ( 200 , 255 , 0 ) ;
}
När du har implementerat all ovanstående kod, gå till HTML-filen och kör den för att kolla resultatet:
Från utgången kan det observeras när du klickar på knappen dess färg ändras enligt den specificerade RGB-färgkoden.
Slutsats
För att ändra knappfärgen när du klickar i CSS, ' :aktiva ” pseudoklass kan användas. Mer specifikt kan det representera knappelementet när det aktiveras. Med den här klassen kan du ställa in olika knappfärger när musen klickar på den. Den här artikeln förklarade proceduren för att ändra knappfärg vid klick i CSS.