WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

Knoppen maken met CSS

Door middel van CSS (Cascading Stylesheets) knoppen maken die bij mouseover veranderen.

Ga met de muis over de knoppen hieronder om het effect te zien.

Hiervoor wordt onderstaand stukje code gebruikt:

In het <head> gedeelte:

<style type="text/css">
<!--
#nav a {
background-color : #00CC00;
border-bottom : solid 2px #006600;
border-left : solid 2px #00FF00;
border-right : solid 2px #006600;
border-top : solid 2px #00FF00;
color : #006600;
font-size : 11px;
text-align : center;
text-decoration : none;
padding : 0 4px 2px 4px;
margin : 3px;
display : block;
float : left;
width : 80px;
}

#nav a:hover {
border-bottom : solid 2px #00FF00;
border-left : solid 2px #006600;
border-right : solid 2px #00FF00;
border-top : solid 2px #006600;
color : #002000;
padding : 1px 3px 1px 5px;
}

}
-->
</style>

In het <body> gedeelte:

<div id="nav">
<a href="#">Contact</a>
<a href="#">Produkten</a>
<a href="#">Homepage</a>
</div>

Met de kleurcodes in het CSS stuk kunnen de kleuren van de achtergrond, de randen en de tekst worden aangepast.
Om de knoppen niet naast, maar onder elkaar te plaatsen kunt u
float : left; weglaten.

Divider

WebKnutselaarsHulpjesDisclaimer: de auteur van WebKnutselaarsHulpjes zal geen enkele aansprakelijkheid aanvaarden voor schadelijke gevolgen, lichamelijke klachten, slapeloze nachten, of enig ander gevolg van het gebruik van de hier getoonde voorbeelden.