Inline tlačítka
21. 04. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Malware: android pod palbou, mobily v ohrožení?
- Pozvánka na Microsoft TechDays 2012
- Reklamní slepota: co to je a jak s ní bojovat?
- Pět důvodů, proč vybrat redakční systém Drupal
- Čeština pro WordPress 3.3.1 k dispozici
Tematicky související články
- Fotogalerie se stejnou výškou řádku
- Vertikální hover menu
- Fotogalerie se zmenšenými obrázky a popisky
- Horizontální záložkové obrázkové menu
- Kartičkové hover menu
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
