KOMPOOS.NL

styling html buttons

» » »

sitemap


uitleg styling html buttons

Hierboven staan volkomen standaard input-buttons. Als je er op klikt krijg je het "knop-effect". Deze pagina demonstreert dat je deze buttons eenvoudig kunt "stylen". Het grote voordeel is dat de buttons altijd zullen werken. Ze hebben geen javascript nodig, en zelfs zonder CSS zal er een "keurige knop" op het beeld-scherm verschijnen. Dit voorbeeld is uiterst "karig". Verander de stylesheet naar eigen inzicht om een indrukwekkende button op jouw pagina('s) te plaatsen. De stylesheet behoort in de head-sectie geplaatst te worden en de html-code in de body-sectie.

stylesheet gestijlde buttons


<style type="text/css">
	input{
		color:#fff;
		background:#777;
		border:0}
	input:hover{
		color:#fee;
		background:#888}
</style>

een paar regels html voorbeeld code


<h3>
	<input type=button onclick="location.href='http://kompoos.nl'" value='home'> » 
	<input type=button onclick="location.href='http://kompoos.nl/css/'" value='css'>
</h3>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.