Berichten sturen met style

Laten we weer eens iets typisch web 2.0 doen, glossy buttons - glas achtige knoppen - gebruiken voor submit doeleinden met
background-position.
Het voordeel ligt erin dat je maar één afbeelding nodig hebt - dus geen preload of laden van afbeelding bij :hover - en deze via CSS positioneert als er over de knop wordt gemuist.

De - verkorte - XHTML code

<input name="verstuur" class="verstuurknop" type="submit" id="verstuur" />

De afbeelding

De truck in heel dit gebeuren ligt erin 1 afbeelding te maken welke de twee toestanden bevat:

  1. De normale toestand, dus niets gebeurd
  2. De :hover toestand, wanneer gebruiker er met zijn muisaanwijzer over komt

De afbeelding dus, 2 toestanden

De afbeelding is 98 pixel breed, en 74 pixel hoog - in mijn voorbeeld, bij jouw kan het anders zijn - waarbij elke aparte afbeelding 37 pixel hoog is. ( 2 x 37 = 74 ;-) ).

De CSS toepassen

input.verstuurknop {
width: 98px;
height: 37px;
background: transparent url(pad_naar/afbeelding.gif) no-repeat;
outline: none;
border: none;
cursor : pointer;
}
input.verstuurknop:hover {
background: transparent url(pad_naar/afbeelding.gif) no-repeat 0 -37px;
}

Uitleg

De gehele truck zit hem in de :hover regel: je ziet dat de afbeelding reeds geladen is en gewoon 37 pixel omhoog wordt getrokken.

De eigenschappen : outline: none, border: none, cursor : pointer zijn om te verhinderen dat er zich een boord rond de afbeelding zou zetten, en dat er effectief een verandering van muisaanwijzer gebeurd.

Hoe het er snel ineengestoken uitziet en werkt kan je op deze pagina hier bekijken.

Het nadeel, de flip-side

Het heeft al een baard tot in heelverwegistan en ge hoort hem al aankomen:

Deze code werkt niet in Internet Explorer 6 en minder, daar deze browser alleen :hover toelaat op <a> elementen.