Knop is een klikbaar element dat wordt gebruikt om een specifieke actie uit te voeren. Met behulp van CSS kunt u verschillende stijlen van knoppen instellen. Een daarvan is om de kleur van een knop bij klikken te wijzigen. De kleur van een knop kan worden ingesteld met behulp van de CSS “ :actief pseudo-klasse.
Deze blog leert u de procedure met betrekking tot het wijzigen van de knopkleur bij klikken. Leer hiervoor eerst over de :active pseudo-klasse.
Laten we beginnen!
Wat is ':actief' in CSS?
Knopkleur wijzigen bij klikken in CSS is mogelijk met behulp van de ' :actief pseudo-klasse. In HTML geeft het een element aan dat wordt geactiveerd wanneer de gebruiker erop klikt. Bovendien start bij het gebruik van een muis de activering wanneer de muistoets wordt ingedrukt.
Syntaxis
a : actief {
kleur : groente ;
}
“ a ” verwijst naar het HTML-element waarop de :active klasse wordt toegepast.
Laten we naar een voorbeeld gaan om het genoemde concept te begrijpen.
Hoe de knopkleur wijzigen bij klikken in CSS?
Om de kleur van een knop bij klikken te wijzigen, maakt u eerst een knop in een HTML-bestand en wijst u de klassenaam toe ' btn ”.
HTML
< lichaam >< knop klas = 'btn' > Knop < / knop >
< / lichaam >
Stel vervolgens in CSS de kleur van de knop in. Hiervoor gebruiken we “ .btn ' om toegang te krijgen tot de knop en de kleur van de knop in te stellen als ' RGB(0, 255, 213) ”.
CSS
.btn {Achtergrond kleur : rgb ( 0 , 255 , 213 ) ;
}
Pas daarna :active pseudo-class op de knop toe als ' .btn:actief ' en stel de kleur van de knop die in de actieve staat wordt weergegeven in als ' RGB(123, 180, 17) ”:
.btn : actief {Achtergrond kleur : rgb ( 123 , 180 , 17 ) ;
}
Dit geeft het volgende resultaat:
Laten we nu de kop toevoegen met de tag
en de naam van de knopklasse ' knop ”, in de -tag.
HTML
< centrum >
< h1 > Verander de kleur van de knop < / h1 >
< knop klas = 'knop' > Klik hier < / knop >
< / centrum >
Vervolgens gaan we naar CSS en stylen we de knop en passen we :active erop toe. Om dit te doen, zullen we de randstijl instellen als ' geen ” en geef opvulling als “ 15px ”. Stel daarna de kleur van de knoptekst in als ' RGB(50, 0, 54) ” en zijn achtergrond als “ RGB(177, 110, 149) ”, en de straal als “ 15px ”:
.knop {
grens : geen ;
opvulling : 15px ;
kleur : rgb ( vijftig , 0 , 54 ) ;
Achtergrond kleur : rgb ( 177 , 110 , 149 ) ;
grens-radius : 15px ;
}
Dit geeft het volgende resultaat:
Daarna zullen we :active pseudo-class op de knop toepassen als ' .knop:actief ' en stel de kleur van een knop in als ' RGB(200, 255, 0) ”:
.knop : actief {
Achtergrond kleur : rgb ( 200 , 255 , 0 ) ;
}
Nadat u alle bovenstaande code hebt geïmplementeerd, gaat u naar het HTML-bestand en voert u het uit om het resultaat te bekijken:
Uit de uitvoer kan worden waargenomen dat wanneer op de knop wordt geklikt, de kleur wordt gewijzigd volgens de opgegeven RGB-kleurcode.
Conclusie
Om de knopkleur bij klikken in CSS te wijzigen, wordt de ' :actief ” pseudo-klasse kan worden gebruikt. Meer specifiek kan het het knopelement vertegenwoordigen wanneer het wordt geactiveerd. Met deze klasse kunt u verschillende knopkleuren instellen wanneer de muis erop klikt. In dit artikel wordt de procedure uitgelegd voor het wijzigen van de knopkleur bij klikken in CSS.
HTML
< centrum >< h1 > Verander de kleur van de knop < / h1 >
< knop klas = 'knop' > Klik hier < / knop >
< / centrum >
Vervolgens gaan we naar CSS en stylen we de knop en passen we :active erop toe. Om dit te doen, zullen we de randstijl instellen als ' geen ” en geef opvulling als “ 15px ”. Stel daarna de kleur van de knoptekst in als ' RGB(50, 0, 54) ” en zijn achtergrond als “ RGB(177, 110, 149) ”, en de straal als “ 15px ”:
.knop {grens : geen ;
opvulling : 15px ;
kleur : rgb ( vijftig , 0 , 54 ) ;
Achtergrond kleur : rgb ( 177 , 110 , 149 ) ;
grens-radius : 15px ;
}
Dit geeft het volgende resultaat:
Daarna zullen we :active pseudo-class op de knop toepassen als ' .knop:actief ' en stel de kleur van een knop in als ' RGB(200, 255, 0) ”:
.knop : actief {Achtergrond kleur : rgb ( 200 , 255 , 0 ) ;
}
Nadat u alle bovenstaande code hebt geïmplementeerd, gaat u naar het HTML-bestand en voert u het uit om het resultaat te bekijken:
Uit de uitvoer kan worden waargenomen dat wanneer op de knop wordt geklikt, de kleur wordt gewijzigd volgens de opgegeven RGB-kleurcode.
Conclusie
Om de knopkleur bij klikken in CSS te wijzigen, wordt de ' :actief ” pseudo-klasse kan worden gebruikt. Meer specifiek kan het het knopelement vertegenwoordigen wanneer het wordt geactiveerd. Met deze klasse kunt u verschillende knopkleuren instellen wanneer de muis erop klikt. In dit artikel wordt de procedure uitgelegd voor het wijzigen van de knopkleur bij klikken in CSS.