JavaScript knapper

Her viser jeg, hvordan du selv kan tilpasse knappers udseende. Jeg har brugt tilbageknappen som eksempel, men du kan gøre det samme med alle knapfunktioner.

Hvis tegnet < kommer frem i din kode, skal du erstatte det med <

Eksempel 1:

Kode 1:

Eksempel 2:
(Her kan du se, hvordan du kan ændre udseende på knappen med style.)

Kode 2:

Forklaringer til style:
cursor:pointer - gør at hånden kommer frem, når man holder musen over knappen.
background-color: - her kan du selv definere en baggrundsfarve
font-family: - her kan du skive den skrifttype, som skriften på knappen skal have. Du skal bruge en skrifttype, som alle har mulighed for at se.
font-size: - dette er størrelsen på skrifttypen. Du kan også bruge px.
font-weight: bold - dette gør teksten fed. Du skal bare fjerne dette, hvis teksten ikke skal være fed.
color: - dette er farven på skriften.
border: - dette er tykkelse, udseende og farve på kanten rundt om knappen
(se evt. HTML Huskeliste om kanter)

Eksempel 3: Tilbage
(Tekst link uden understregning)

Kode 3:

Eksempel 4:
(Billede link. Er det samme som tekst-link, men du udskifter bare teksten med et billede.)

Kode 4:

Omvendt
Vil du omvendt gerne lave et alm. link om til en knap, kan du gøre dette således:

Eksempel:

Kode:

Links:
Design knapper med CSS
Giv dine formularknapper et lag kosmetik

På Teknik og Sjov:
JavaScripts/Knapper
CSS - Cascading StyleSheet