CSS - Button van link maken (menu)


Om bijvoorbeeld een menu te maken kun je de links door middel van CSS laten lijken op buttons. De tutorial hieronder laat zien je hoe je dit eenvoudig kunt bereiken. Om te beginnen eerst de HTML code hiervoor. Om ervoor te zorgen dat alleen de links in het menu de opmaak krijgt geef je in dit geval een classnaam aan elke link van het menu.

<a href="link.htm" class="menubutton">menu-item</a>
<a href="link.htm" class="menubutton">menu-item</a>


Werkend ziet het er dan nog gewoon uit als twee normale links.

menu-item
menu-item

Dan de opmaak. Om er nu een knop van te kunnen maken gebruik je als eerste display:block; zoals hieronder in de code. Belangrijke eigenschappen daarnaast zijn de hoogte en de breedte, ook margin:1px; staat hieronder om de buttons te scheiden.

.menubutton {
        width:100px;
        height:20px;
        margin:1px;
        display:block;
}


De volgende stap is het instellen van de achtergrondkleur en het lettertype.

text-align:center;
background-color:#90B531;
font-size:8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;


Werkend ziet het er dan als volgt uit.

menu-item menu-item

Dan zijn we al een heel eind maar is het nog niet echt een button. Dit doe je door borders toe te passen zoals in de code hieronder met net even lichtere kleuren aan de boven en linerkant van de knop en donkere kleuren aan de onder en rechterkant van de knop.

border-top: 2px solid #D8E5B7;
border-left: 2px solid #D8E5B7;
border-bottom: 2px solid #687D22;
border-right: 2px solid #687D22;


menu-item menu-item

Dan is het ook mooi om een mouse-over in te stellen. Hiervoor stel je in de CSS een nieuwe regel op, in feite een kopie van "menubutton" maar in dit geval wordt er dan :hover toegevoegd en zijn er een aantal eigenschappen gewijzigd waardoor het verschil is te zien. In dit geval veranderd de achtergrondkleur maar er kan meer gewijzigd worden.

a.menubutton:hover {
        background-color:#D8E5B7;
}


menu-item menu-item

Samenvattend voor de bovenstaande buttons krijg je dan de volgende CSS code.

.menubutton {
        width:100px;
        height:20px;
        margin:1px;
        display:block;
        background-color:#90B531;
        font-size:8pt;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-align:center;
        border-top: 2px solid #D8E5B7;
        border-left: 2px solid #D8E5B7;
        border-bottom: 2px solid #687D22;
        border-right: 2px solid #687D22;
}

a:hover.menubutton {
        background-color:#D8E5B7;
}


Nu gaat het hier om knoppen die er vrij standaard uitzien maar je kunt nog veel verder gaan door ook een schaduw toe te passen, ronde hoeken, etc. Een voorbeeld hieronder.

menu-item

.menu {
        display:block;
        width:120px;
        height:26px;
        margin:0px 20px 0px 0px;
        padding:4px 0px 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;
        font-weight:normal;
        cursor:hand;
        cursor:pointer;
        text-align:center;
        text-decoration:none;
}