Een button opmaken met CSS

Posted by Cicco

april 5, 2008

Uit de zoekresultaten van deze website zie ik regelmatig zoektermen voorkomen met als doel hoe je een button kan opmaken. Een button zoals je bijvoorbeeld gebruikt bij je contactformulier.

Zo bijvoorbeeld :

Dit is heel simpel en is te bereiken met enkele regeltjes CSS. Even overlopen hoe je dit doet aan de hand van een mini formuliertje :

Maak een formuliertje met een textarea en een button. Daar heb je deze code voor nodig :

<form method="post" action="">

<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>

<br />

<br />

<input  type="submit" name="button" id="button" value="Versturen" />

</form>

Voor degene die Dreamweaver gebruiken en enkel werken vanuit Design view, overloop volgende stappen :

Insert -> Form -> Form
Insert -> Form -> Textarea
Insert -> Form -> Button

Nu gaan we de button opmaken en dit doen we aan de hand van CSS en een simpele class. Een class is een actie die wordt opgelegd aan 1 specifiek element, de button dus.

We schakelen over naar Code view voor degene die in Dreamweaver werken en geven de button een class, we noemen deze class ’sendbutton’. Zoals in de volgende regel te zien is :

<input class="sendbutton" type="submit" name="button" id="button" value="Versturen" />

Nu gaan we ’sendclass’ een opmaak geven door middel van CSS zodat deze kan worden doorgegeven aan de button. Een class wordt steeds vooraf gegaan door een ‘punt’ in de CSS. Hier de volledige opmaak voor de button zoals in het voorbeeld te zien is :

.sendbutton {

height: 25px;

width: 75px;

border: 1px solid #ccc;

background-color: #5D86C8;

}

Even uitleggen wat bovenstaande allemaal betekent :

.sendbutton : de naam van de class die ook in de code van de button is geplaatst.
height 25px; : er wordt een hoogte van 25px gegeven aan de button.
width: 75px; : er wordt een breedte van 75px gegeven aan de button.
border: 1px solid #ccc; : Een grijze border van 1px. Bovenaan, onderaan, links en rechts.
background-color: #5D86C8; : De blauwe achtergrond.

Zoals je ziet wordt elke regel afgesloten met een ‘punt komma’ en de class wordt geopend en afgesloten met een accolade. Dit is standaard voor CSS.

Meer heb je niet nodig om je button op te maken. Voor degene die liever over een werkend voorbeeld beschikken is de mini form van deze tutorial gratis te downloaden.

Heb je aan de hand van deze tutorial ook één of meerdere buttons opgemaakt? Laat het even weten via een berichtje onderaan. Ik ben benieuwd…