Een knop is een fundamenteel onderdeel van HTML dat verschillende taken uitvoert. Door CSS te gebruiken, kunt u de knop ontwerpen en stylen. Er zijn verschillende manieren om de knop te ontwerpen, zoals de knop inkleuren, het formaat wijzigen, zweven en nog veel meer.

In dit artikel zullen we eerst leren hoe u een knop kunt maken en vervolgens de kleur van een knop kunt wijzigen wanneer u zweeft.

Laten we beginnen!

Hoe verander ik de kleur van de knop bij de muisaanwijzer in CSS?

In CSS, ' :zweven ” wordt gebruikt om de kleur van de knop te wijzigen tijdens het zweven. “ :zweven ” is een pseudo-klasse die het mogelijk maakt het gedrag van de HTML-elementen te wijzigen wanneer er een muis overheen gaat, zoals elementen zoals links, knoppen, afbeeldingen en nog veel meer.

De syntaxis van :zweven wordt hieronder gegeven.

Syntaxis

In de hierboven verstrekte syntaxis, ' a ” verwijst naar het HTML-element waar de “ :zweven ' is toegepast. In CSS kunt u het zweefgedrag van de HTML-elementen instellen, zoals de kleur, grootte en breedte van het element.

Stap 1: Div en knop maken

In de HTML zullen we eerst een div maken en een kop toevoegen met

en een knop met behulp van een tag. Hier zullen we de klassenaam van de knop toewijzen als ' btn ” en de knoptekst als “ Beweeg op mij ”.

HTML

Het resultaat van de bovengenoemde code wordt hieronder gegeven. U kunt zien dat de kop en de knop zijn gemaakt:

Ga nu naar de CSS om de div en de knop één voor één op te maken.

Stap 2: Stijlknop en Div

Eerst zullen we de gemaakte container opmaken met ' div ”. Vervolgens stellen we de hoogte van de div in als ' 250px ” en de achtergrondkleur als “ RGB(199, 173, 192) ”. We zullen ook de eigenschap border gebruiken om de rand van de div aan te passen, breedte als ' 5px ”, stijl als “ stevig ”, en kleur als “ RGB(40, 2, 55) ”.

CSS

De onderstaande uitvoer geeft aan dat de toegevoegde stijl met succes is toegepast op de div:

In de volgende stap zullen we de knop opmaken met CSS.

Nu zullen we de knop opmaken met ' .btn ” om toegang te krijgen tot de knop die in HTML is gemaakt. Daarna zullen we de rand van de knop verbergen door ' geen ” als de waarde van het grenseigendom. Daarna passen we de lettergrootte aan naar “ groot ” en de opvulling van de knop naar “ 10px ” om spaties te maken tussen de inhoud van de knop en de rand van de knop. Uiteindelijk zullen we de kleur van de tekst en achtergrond instellen als ' RGB(50, 0, 54) ' en ' RGB(193, 54, 135) ”:

De knop is nu opgemaakt:

Verder zullen we toepassen “ :zweven ” om de kleur van een knop bij de muisaanwijzer te wijzigen.

Stap 3: Verander de knopkleur bij de muisaanwijzer

Nu gebruiken we ' .btn:zweven ” om de knop te koppelen aan het hover pseudo-class element. Als gevolg hiervan wordt de muisaanwijzer op de knop toegepast. Vervolgens zullen we de achtergrondkleur en tekstkleur van de knop instellen als “ RGB(66, 2, 41) ' en ' RGB(119, 255, 0) ”. Deze kleuren worden toegepast op de knop wanneer er met de muis over wordt gegaan:

In de onderstaande uitvoer kunt u zien dat de kleur van de knop wordt gewijzigd wanneer een muis erover beweegt:

Dat is het! We hebben de methode uitgelegd om de knopkleur te wijzigen bij het zweven met behulp van CSS.

Conclusie

Om de kleur van een knop bij het zweven te wijzigen, wordt de ' :zweven ” pseudo-klasse-element wordt gebruikt. Om dit te doen, koppelt u de knop met :hover en stelt u de kleur van de knop in, die zal veranderen wanneer we erop gaan zweven. In dit artikel hebben we de methode uitgelegd om de kleur van de knop bij zweven te veranderen en hebben we er een voorbeeld van gegeven.