Når du setter inn en knapp i et skjema (form) er det operativsystemet til brukeren som styrer utseende på knappen. Og nettleseren (browser) som styrer funksjonalitet. Dessuten er antall karakterer i knappen (Value) som styrer størrelsen. Disse føringene kan være irriterende nok for en pirkete designer. Man kan selvsagt lage Flash-buttons eller grafikk-knapper. Men da får dette konsekvenser for kompabiliteten ved f.eks. iPad/iPhone og brukerfunksjonaliteten for svaksynte som er avhengig av tilleggsinnretninger som tolker knapper (buttons) for det de er. Med CSS3 og Javascript kan vi imidlertid ta kontrollen:

I det første eksemplet har jeg laget tre instanser av knappen i CSS; en for standard utseende, en for 'hover' og en 'klikk'. Jeg setter 'border-color' mørkere for bunn og høyre enn topp og venstre, for 'emboss'. Runde hjørner tillates i CSS3: border-radius: 5px; og i tillegg: -moz-border-radius: 5px; av hensyn til Mozilla-brukere. Med CSS kan du også sette en fast bredde på knappene, uavhengig av antall karakterer. Du kan selvsagt også endre font, størrelse snitt og padding. Det neste jeg gjorde var å kopiere denne CSS-class'en og gi genuine navn for hver instans; .btn, .btnHov og .btnClk og deretter endre på fargeinstillingene så 'hover' er litt mørkere og blått for klikk. I HTML-koden for knappen, <input type="submit" />, legger jeg så til følgende 'class' og 'events': class="btn"onmousedown="this.className='btnClick'"onmouseover="this.className='btnHov'" og onmouseout="this.className='btn'". I tillegg til deg som for øvrig skal deklareres i knappen. Merk at jeg bruker 'onmousdown' og ikke 'onclick'. Ved 'onclick' vil eventet finne sted etter at du har klikket, ved 'onmousedown' skjer det i det du klikker. Klikk her for å se CSS-stilarket for denne knappen.

Den neste knappen er lik den forrige, men har i tillegg fått en forløpning som bakgrunnsgrafikk (30x25 px). Den er litt høyere enn knappen – i tilfelle pikselhøyden endres. Klikk her for å se CSS-stilarket for denne knappen.

Begge disse knappene fungerer helt likt i følgende browsere:

Safari

Safari – versjon 5.0.4 (6533.20.27)

Firefox

Firefox – versjon 3.6.15 – Mozilla/5.0

Chrome

Chrome – versjon 10.0.648.204

Opera

Opera – versjon 10.11 1190

Alle er testet under Macintosh; Intel Mac OS X 10.6.7; U; nb) Presto/2.7.62 Version/11.01.

I 1995 da fortsatt jobbet med «multimedia» og «The World Wide Web» hadde sitt store gjennombrudd leste vi Ray Kristofs «Interactivity By Design». Der fikk vi vite at at var viktig for brukeren å få en respons når denne beveger musepekeren over 'hotspots' og liknende samt klikker på knapper og lenker; enten visuelt eller med lyd. Dette er kanskje ikke like aktuelt i våre dager, når folk har pekt og klikket i femten år allerede; de fleste av oss vet hva som kommer til å skje. Selv om vi savner respons når det ikke skjer noe … I dette siste knappeeksemplet har jeg lagt til en lydrespons. Her har knappen fått et nytt event: onclick="btnSound('sound')", som utfører et javascript:

function btnSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}

Lydfila er definert og lenket på denne måten i dokumentets 'head'-tag:

<embed src="sounds/switch.wav" autostart=false width=0 height=0 name="sound" enablejavascript="true">

Som du raskt ser av dette scriptet vil du kunne 'embedde' en hel rekke lyder, gi dem genuine navn og kalle på dem etter tur.

Ikke like høy nettleserkompabilitet

Lydknappen fungerer helt fint under Safari og Chrome. Firefox er taus, mens Opera spiller av lyden 'onload', altså ved ankomst og oppdatering (refresh). Jeg har ikke forsket meg helt ferdig på årsakene til dette …