Internet svämmar över med olika lösningar för hur man modifierar utseendet på sina knappar. Många av lösningarna består rena länkar (a-taggar) som modifieras, vilket går emot hela syftet och funktionen med en knapp.

Resultatet kommer bli så här i alla moderna webbläsare:

Och så här i Internet Explorer 7:

Ska ta upp hur man enkelt stylar en input med ren CSS och en liten ikon.

Först HTML koden där vi skapar två knappar, en submit och en reset, med id b1 och b2:
[code language="css"]

Ganska enkelt? Givetvis. Nu blir det lite mer kod när CSSen ska läggas till.

Först måste du hämta hem ikonerna, de jag använt finns här och här. Båda är släppta under GPL så det är fritt att använda dem.

Vi sätter för det första en ny border vilket tar gör att den gamla layouten försvinner. En padding sätts också och så att knappen blir den storleken vi är ute efter. Om ikonen känns lite malplacerad så justeras den enkelt med background-position:.

Sen kommer fusket, eftersom Explorer inte stödjer border-radius (varken version 7 eller 8), så lägger vi till -moz och -webkit för de som använder Mozilla eller WebKit-baserad läsare.
[code language="css"]
#b1, #b2 {
padding: 3px 12px 3px 27px;
border: 1px #ccc solid;
background: #f9f9f9 url(button_ok.png) no-repeat center left;
background-position: 7px;

color: #333;
font-family: Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#b1:hover, #b2:hover {
background-color: #f5f5f5;
}
#b2 {
background: #f9f9f9 url(button_cancel.png) no-repeat center left;
background-position: 7px;
}

Sådär, nu ska du ha det färdiga resultatet och få alla fördelar med en riktig input utan att behöva hantera javascript, konstiga hack eller andra element.