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
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
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ář.
