Per Holmbergs webbtips:

Grafiska textknappar

Ibland vill man ha lite roligare länkar än rena textlänkar, man vill ha grafiska textknappar!

Klassiskt gör man det genom att ha en bild för varje knapp och länk. Det finns dock ett smartare sätt som bara behöver en bildfil. Knepet är att använda en knappbild utan text, och sedan lägga länktexten över. Närmare beskrivet låter man länken renderas som en ruta, knappbilden lägger man som bakgrundsbild till denna ruta och länktexten låter man renderas i mitten av rutan (eller vilken justering man nu vill ha).

Följande CSS används på perholmberg.net:s förstasida:

.nav a { display: block; width: 140px; height: 20px; text-align: center;
background-image: url(navknapp.png); background-repeat: no-repeat;
background-position: center; font-size: 82%; font-style: italic;
margin: 12px 0; padding-top: 3px; }

Tillhörande HTML-kod (klippt):

<div class="nav">
...
<a href="/kontakt">kontakt</a>
...
</div>

Det första jag gör är att sätta så att länken renderas som en ruta, detta görs med CSS-egenskapen display. Storleken på rutan sätts med width och height och grafikdelen sätts med background-image. Resten av egenskaperna är mest mickel för att texten ska centreras på den underliggande grafiken.

Förra tipset: Förklara förkortningar smart
Nästa tips: Automatisk utskriftsdesign med CSS
© Per Holmberg [kontakt]. Sidan senast uppdaterad 2004-04-28. Till toppen av sidan