WebKnutselaarsHulpjes
TWEET CSS buttons Diashow 1 Diashow 2 Geluid MouseOver Imagemap JS-Klokje Websafe Kleuren Laadtijd Meten Meta-tags Mouseover Plaatjes Beschermen Popups 1 Popups 2 Popups 3 Pagina Verversen Uitklapmenu 1 Uitklapmenu 2 Textures Reactie Home
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.
