[news]Zorg dat je valid CSS en XHTML genereert, that's it. Voor het stylen van buttons (klasse submit en button) gebruik ik zelf altijd qua CSS zoiets als dit;[/news]
input.submit {
background: url('button.png');
background-position: 0px 0px; /* Voor CSS sprites */
border: 1px solid #000;
width: 120px;
height: 34px;
color: #kleurtje-1;
overflow: hidden;
}
input.submit:hover {
background: url('button.png');
background-position: 0px -39px; /* Voor CSS sprites */
cursor: hand;
color: #kleurtje-2;
} [news]Werkt met nagenoeg alle moderne browsers. Je zou dan nog verschillende classes toe kunnen kennen aan de buttons of de boel kunnen verfraaien met schaduwen en ronde CSS hoekjes. Daarvoor gebruik ik zelf voor een schaduw onder de buttons;[/news]
box-shadow: 1px 1px 2px #333;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333; of dit voor ronde hoekjes;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px; of deze om een leuke schaduw te geven aan de button tekst;
text-shadow: #000 1px 1px 0px;[news]Zorg dat je achtergrondplaatjes voor buttons in sprite vorm doet (Google maar even op CSS sprites). Dat zorgt ervoor dat je tijdens de mouseover events geen vertraging krijgt voor het laden van het mouseover beeld.
Voor de rest is het je eigen fantasie, de stijl en het doel van de knoppen die bepalen wat jij als designer er van maakt. Dat ligt (gelukkig, het zou een saaie boel worden anders) niet vast. [/news]
Gast
