Toto řešení ukazuje, jak vytvořit čistě textová tlačítka. Tato tlačítka jsou formátována jako inline prvky uvnitř textu. Mohou tedy být formátována jako plovoucí, zarovnávána nebo vkládána do seznamů.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Petr Staníček. Bližší popis najdete v článku Inline tlačítka (2.0).
CSS
.inline-button
{
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;
}
.typint
{
background: #6394d6;
color: white;
}
.typint em
{
background: white;
color: #6394d6;
}
.typknih
{
background: white;
color: #6394d6;
}
.typknih em
{
background: #6394d6;
color: white;
}
XHTML
<html>
<body>
<p>
<a class=“inline-button typint“ href=“http://www.interval.cz/“><em>Interval</em><span>.cz</span></a>
<br />
<a class=“inline-button typknih“ href=“http://css.interval.cz/“><em>CSS</em><span>Knihovna</span></a>
<br />
<a class=“inline-button typknih“ href=“http://css.interval.cz/“><em>CSS</em><span>Knihovna</span><em>made</em></a>
<br />
</p>
</body>
</html>
