English-only | Jenom česky | Bilingual/Dvojjazyčně
Obrázková tlačítka zobrazující text můžeme s CSS nahradit čistě textovými odkazy. Jelikož tato tlačítka budou formátovaná jako inline prvky, mohou být umístěna i uvnitř textu. Navíc se s nimi jako s textem i pracuje — mohou být vložena do seznamů, zarovnávána (na střed, doprava), mohou být plovoucí atd. Více viz příklad a "detaily" níže.
Používá se následující kód (více detailů najdete ve zdrojovém kódu příkladů). (X)HTML kód:
<a class="inline-button" href="the_url"><em>Some</em><span> Link</span></a>
A styl je pak definován např. takto:
.inline-button {
_width:12em;
font: bold 65%/1 Verdana, sans-serif;
margin: 0 0.2em; padding: 0.1em 0; _padding:0;
border: 1px solid black;
white-space:nowrap;
text-decoration: none;
vertical-align:middle;
background: #ccc;
color: black;
}
.inline-button em {
_width:1em; _cursor:hand;
font-style: normal;
margin:0; padding: 0.1em 0.5em;
background: white;
color: black;
}
.inline-button span {
_width:1em; _cursor:hand;
margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
}
.inline-button:hover {
background: #666;
color: white;
}
.inline-button:hover em {
background: black;
color: white;
}
Lorem ipsum Some Link dolor sit amet...
Lorem ipsum Some Link dolor sit amet (stejný odkaz, ale nenastylovaný) .
Hlavní funkcionalitu zajišťuje třída inline-button, druhou doplňující třídou můžeme vytvářet barevné variace. Každý si může připravit spoustu vlastních kombinací, např.:
.orange { background: orange; color: black }
.orange em { background: white; color: #c60 }
.blue { background: #06c; color: white }
.blue em { background: white; color: #06c }
.green { background: green; color: white }
.green em { background: white; color: green }
...
<a class="inline-button orange" href="the_url"><em>RSS</em><span> Export</span></a>
<a class="inline-button blue" href="the_url"><em>W3C</em><span> XHTML 1.0</span></a>
<a class="inline-button green" href="the_url"><em>ICQ</em><span> 1234567</span></a>
Lorem ipsum RSS Export dolor sit amet...
Lorem ipsum W3C XHTML 1.0 dolor sit amet...
Lorem ipsum ICQ 1234567 dolor sit amet...
Odkaz je složen ze dvou sousedících prvků (v našem případě em a span, ale mohou být použity i jakékoli jiné inline prvky). Mezi nimi nesmí být žádná mezera. Odkaz má 1px rámeček a jeho svislý padding musí být přesně stejný jako padding vnitřních prvků (protože svislý padding je u inline prvků zobrazen kolem obsahu, aniž by měl vliv na jejich pozici).
Všechny ty "_vlastnosti" v CSS jsou zde kvůli MSIE5/Win (podrobnosti viz Podtržítkový hack). V prvé řadě nastavením hodnoty width změní MSIE5/Win inline prvek na inline-block, přičemž zadaná šířka zde funguje jen jako minimální šířka (detaily viz v článku "Inline bloky"). Proto je hodnota width:1em pro vnitřní prvky dostatečná, ale šířku vnějšího prvku musíme vhodně odhadnout (v příkladu je použito 12em). Za druhé: kvůli použití inline-bloků v MSIE5/Win už bude mít padding vliv na pozici prvku, proto je pro tento prohlížeč nastaven padding nulový (_padding:0). A konečně je nastavena ještě hodnota _cursor:hand, jinak MSIE5/Win ponechá nad tlačítkem textový kurzor.
Toto řešení by mělo fungovat všude. Testováno bylo v MSIE5/Win, MSIE6/Win, Mozille, Opeře a Safari (jen v MSIE/Mac dělá psí kusy, ale to je už je prakticky mrtvý prohlížeč). Ve všech prohlížečích bude šířka tlačítka přizpůsobena jeho obsahu, jen v MSIE5/Win bude vždy stejná, podle hodnoty _width nastavené pro .inline-button.