Wanneer u een knop aan een webpagina toevoegt, wordt het aanbevolen dat u CSS gebruikt om de stijl te maken. Het gebruik van CSS is de voorkeursmethode, omdat het een efficiëntere en meer georganiseerde manier is om stijlcode op te slaan voor hergebruik in meer dan één gebied op uw pagina of site. Zoals je in het onderstaande voorbeeld kunt zien, kunnen veel attributen worden gebruikt om elk type knop te manipuleren.

CSS-tekst voor knopstyling

#submit {background-color: #bbb; opvulling: .5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 6px; kleur: #fff; lettertype-familie: 'Oswald'; lettertypegrootte: 20px; tekstdecoratie: geen; grens: geen; } #submit: hover {border: none; achtergrond: oranje; vakschaduw: 0px 0px 1px # 777; }

HTML-code voor het maken van de knop

Nadat de CSS aan de pagina is toegevoegd, kan CSS op elke knop worden toegepast met behulp van de code in de HTML.

Voorbeeldknop

Voorbeeld van knop gemaakt door de CSS

U kunt aan de hand van het bovenstaande voorbeeld zien dat de knop een lichtgrijze achtergrond en witte tekst heeft als de muis niet over de knop zweeft. Wanneer de muis over de knop zweeft, verandert de achtergrond in oranje. Ook zijn de hoeken van de knop afgerond in plaats van vierkant, zoals een standaard formulierknop.