Submit button stylen met CSS

De standaard submit buttons in een browser zijn meestal niet zo spetterend. Ook zien ze er telkens anders uit. De button in Opera ziet er bijvoorbeeld anders uit dan die van Firefox. In dit artikel zal ik je uitleggen hoe je die button zelf kan stylen, op twee verschillende manieren.

De eerste methode is de meest gekende. We nemen gewoon een inputveld met als type submit. Hieronder zie je de html.

De html

<input class="button" type="submit" value="submit" />

Het type van het input veld hebben we op submit gezet, klinkt logisch. Als value hebben we ook submit genomen, deze tekst komt op de button te staan. Als class nemen we button, zodat we alles kunnen opmaken in ons css bestand.

De css

input.button {
height:20px;
font:11px tahoma, arial;
cursor:pointer;
border:1px solid #F9F9F9;
background:#F4F4F4;
}

In de css stellen we de hoogte in, het lettertype en we zorgen er voor dat de cursor veranderd naar een handje als je er over gaat. Ook geven we de button een rand van 1 pixel en stellen we de achtergrond kleur in. Dit is maar een voorbeeld, zelf kan je nog veel verder gaan. Je kan bijvoorbeeld een achtergrond afbeelding instellen.

Nu is er ook nog een tweede manier. Deze wordt voornamelijk gebruikt om een afbeelding te gebruiken als button. In de html wordt het duidelijk.

De html

<input src="http://csslabs.be/wordpress/wp-admin/img/button.png" type="image" />

Zoals je ziet geven we hier al de url naar het plaatje mee, zo moeten we niet meer gaan werken in css.

Dit waren dus de methoden om je submit button te stylen. Probeer zelf wat creatief te zijn en laat ons zien wat je ervan gemaakt hebt.