Inline tlačítka
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
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
-
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025
Nejnovější
-
Co je to neuronová síť
21. července 2025 -
Elektronický podpis – má dnes ještě uplatnění?
16. července 2025 -
Co je to Generative Engine Optimization (GEO)
11. července 2025 -
Počítač v kapse: Android 16 připravuje průlomový Desktop Mode
8. července 2025