CSS - Buttons opmaken


Standaard als je formulieren gebruikt op een website dan zullen de buttons de vormgeving krijgen van het besturingssysteem zoals bijvoorbeeld Windows. Een voorbeeld van een standaard button zie je hieronder evenals de HTML code als voorbeeld van de button.

Button 1: <input type="Button" value="Button 1" />
Button 2: <button>Button 2</button>


Het is natuurlijk veel mooier om zelf buttons vorm te geven. Om dit te doen neem de button op in de CSS zodat altijd alle buttons op een website dezelfde opmaak krijgen. Nu zijn er zoals je hierboven ziet twee soorten buttons, beide kunnen eenvoudig opgemaakt worden.

input[type=submit],
button {
}


Dan de opmaak. Als eerste bijvoorbeeld een achtergrondkleur, wat in dit geval is ingesteld op de kleur oranje (#FF0000;). De tekst in de button moet dan ook een kleurtje krijgen en in dit geval is dat wit. Beiden toegepast zie je in de code hieronder evenals de buttons zelf.

input[type=submit],
button {
        background-color:#FF6600;
        color:#FFFFFF;
}


In plaats van een achtergrondkleur kun je eventueel ook een afbeelding gebruiken als achtergrond. In het bovenstaande voorbeeld zie je dat de button standaard een dikke rand heeft, om deze weg te halen plaats in de code, border:none; maar je kan ook zelf een rand instellen. Als aanvulling erop kun je ook de breedte en de hoogte van de button aangeven.

Hieronder zie je dan de buttons opgemaakt met de bijbehorende code.

input[type=submit],
button {
        width:120px;
        height:25px;
        margin:0px 20px 0px 0px;
        border:none;
        border-radius:15px;
        box-shadow:0px 0px 10px 3px rgba(0,0,0,0.2);
        background-color:#FF6600;
        color:#FFFFFF;
        font-size:14px;
        cursor:hand;
        cursor:pointer;
}