English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Technique: Inline Buttons (2.0)

Řešení CSS: Inline tlačítka (2.0)

Image-buttons displaying text can be replaced by text-only links. For these buttons are formated as inlines, they can be placed within the text, as well as treated as text — you can put them into lists, justify them (center, right), float them etc. See the example and "Details" bellow.

How does it work?

Following code is used (see the examples' source code for more details). The (X)HTML code:

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.

Jak to funguje?

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>

The style is defined like this:

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 (the same link, just unstyled) (stejný odkaz, ale nenastylovaný) .


The inline-button class makes the main functionality, the additional second class may make color variantions. You can make lots of your own combinations, e. g.:

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&nbsp;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...


Details

The link is made of two adjacent elements (em and span in this case, any other inline elements may be used). No whitespace must be between them. The link has 1px border and its vertical padding must be exactly the same as the padding used in the innner elements (this is because vertical padding is placed around the content of inline elements having no effect on their position).

All those "_properties" in CSS are here because of MSIE5/Win (for details see the Underscore Hack). First, setting the width property in MSIE5/Win changes an inline element into an inline-block, while the width is acting as the minimal width (see details in the "Inline blocks" article). This is why the width:1em is enough for the inner elements, but we have to guess the width of the outer element (12em is used in the example). Second: because of inline-blocks in MSIE5/Win, the padding has influence to the their position — that's why the padding has been changed to zero (_padding:0). In addition, _cursor:hand has been set, otherwise MSIE5/Win keeps the text selection cursor while hovering the link.

The compatibility

It should work everywhere. It has been tested in MSIE5/Win, MSIE6/Win, Mozilla, Opera and Safari (only MSIE/Mac fails, but it's virtually dead browser). All browsers will adjust the button width to its content size, just in MSIE5/Win all buttons will have the same width (according to the _width set within the .inline-button selector).

Detaily

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.

Kompatibilita

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.