Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben. A következő leírásban egy ilyen szerű gomb elkészítéséről lesz szó. Először elmondanám, hogyan is működik a gomb, milyen elmélet alapján, majd a szükséges kódot is közzéteszem.
Az ötlet az, hogy ne legyen egy statikus háttér, amiről lefuthat a szöveg, ha éppen hosszabb, mint a kép maga. Persze ezt elméletben ne lehet tökéletesen kiküszöbölni, még szerencse, hogy a gyakorlati világban élünk. A háttér dinamikus szélességét annak köszönhetjük, hogy a linkekbe nem a szöveget helyezzük, ahnem egy span elemet, ami tartalmazza a szöveget, így valójában két hátterünk van: egy nyitó, ami nyulni is fog, ahogy a szöveg egyre hosszabb (persze csak egy pontig, de mivel mi határozzuk meg, nem okoz gondot) és egy záró háttér, amely lezárja az első háttér végét, így egységes megjelenést biztosít.

<a href="#" class="gomb"><span>a link cime</span></a>

A következő képekre lesz szükség a bemutatott példához:

A linket a következő CSS kód formázza gombszerűvé:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

a.gomb {
background: transparent url('normal-a-bg.gif') no-repeat top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* a masik hatter tolasa */
text-decoration: none;
}
 
a.gomb span {
background: transparent url('normal-span-bg.gif') no-repeat top left;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
 
a.gomb:active {
background: transparent url('aktiv-a-bg.gif') no-repeat top right;
color: #000;
outline: none; /* Firefox fix */
}
 
a.gomb:active span {
background: transparent url('aktiv-span-bg.gif') no-repeat top left;
padding: 6px 0 4px 18px; /* eltolja a szoveget */
}

példa gomb

Gondlom elég érthető, hogyan működik Ezen kivül több módszer is létezik, de talán ez a legegyszerübb: minek komplikálni a dolgokat, ha egy a végeredmény?