Inline tlačítka

21. dubna 2006

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>

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *