07.12.06.Gombkészítés a Button elemmel

Nagyon szép gombokat készíthetünk a <button> HTML elem használatával, amelynek nagy előnye az egyszerűség mellet, hogy minden elterjedt böngészővel remekül együttműködik. Négy képre lesz szükségünk összesen, ha dinamikusan nyúló gombot szeretnénk.

Nálam ezek így néznek ki:

Alapállapot bal oldal

Alapállapot jobb oldal

Rámutatáskori állapot bal oldal

Rámutatáskori állapot jobb oldal

Persze a gombok kinézetének megalkotásában most is csak a képzeletünk szabhat határt.

A HTML kód
Semmi mellébeszélés, egyszerűen létrehozunk egy gombot a <button> elemmel felhasználásával.

<button value="submit" class="submitBtn">
  <span>Küldés</span>
</button>

A CSS kód
A button elem és a gombunkon lévő szöveg stílusának leírása következik.

button {
  border:0;
  cursor:pointer;
  font-weight:bold;
  padding:0 20px 0 0;
  text-align:center;
}
button span {
  position:relative;
  display:block;
  white-space:nowrap;
  padding:0 0 0 20px;
}
button.submitBtn {
  background:url(btn_blue_right.gif) right no-repeat;
  font-size:1.3em;
}
button.submitBtn span {
  height:50px;
  line-height:50px;
  background:url(btn_blue_left.gif) left no-repeat;
  color:#fff;
}
button.submitBtn:hover {
  background:url(btn_blue_right_hover.gif) right no-repeat;
}
button.submitBtn:hover span {
  background:url(btn_blue_left_hover.gif) left no-repeat;
}

CSS kód IE6 és IE7-hez
Erre a kis kiegészítésre még szükségünk van, hogy MS oldalon is tökéletes eredményt kapjunk.

button {
  width:auto;
  overflow:visible;
}
button span {
  margin-top:1px;
}

Tesztelt böngészők
IE6, IE7, Firefox, Opera, Konqueror

Eredmény
A demonstráció megtekinthető itt.

A leírásban felhasznált képek és kódok zipelve letölthetők, szabadon felhasználhatók. Kérdések, vélemények, ötletek esetén nyugodtan szólj hozzá lentebb.