Knoppen maken met css
Artikel details
Share
Soortgelijke artikels
Het voordeel van knoppen te maken is dat bezoekers makkelijker en sneller van de ene naar de andere pagina navigeren. Ze moeten niet meer net over een bepaald stuk tekst komen om verder te gaan maar naar een grotere makkelijkere knop. Zo wordt je pagina bezoekersvriendelijker, interactiever en tevens nog meer web 2.0.
We gaan een knop maken met css. Deze knop zullen we vervolgens door middel van een div met tekst in tonen.
.nav{
border:1px solid #677f79; /*rand zetten in gewenste kleur en grootte*/
padding: 5px; /*Hoeveel de rand van de tekst verwijdert is.*/
padding-left:10px; /*Iets verder links en rechts*/
padding-right:10px;
margin:2px; /*Hoeveel andere elementen van de knop verwijdert mogen zijn*/
background-color:#dde3e2; /*Achtergrond kleur*/
cursor:pointer; /*Als we met de muis over de knop gaan tonen we een click handje*/
}
.nav:hover{ /*Als we over de knop gaan*/
background-color:#b6c2c0; /*veranderen we de achtergrond kleur*/
}
Zo hebben we makkelijk een knop aangemaakt die van kleur zal veranderen als erover wordt gegaan. Er zal dan tevens een klikcursor komen zodat de bezoeker weet dat hij hierop kan klikken.
Vervolgens moeten we de knop aanmaken met HTML en met wat javascript zorgen we ervoor dat overal op de knop kan worden geklikt om naar een andere pagina te gaan.
<div onClick="window.location=('URL')" class="nav"><a href="URL" title="Verder">Verder</a></div>
We gebruiken nog een a tag om ervoor te zorgen dat zoekmachines ook de weg vinden naar de andere pagina.
Er zijn nog geen reacties op dit artikel.
Om op dit artikel te reageren dient u een account aan te maken.
