Tlačítka - buttony

Tlačítka se používají především ve formulářích, ale často jsou užívány také jako odkazy. Ve formulářích si vystačíte s obyčejným tagem <input type="button | submit | file..">. Ale jakmile je použijete jako navigaci, většinou je budete chtít mít podle svého vkusu a ne jenom šedý kvádr. Proto zde uvedu možnosti jak design tlačítek měnit. Nejprve několik možností, jak vytvořit tlačítko:

• Tag <input> a <button>
• Pomocí CSS, JavaScriptu a tabulek
• Obrázky

Kdy použít obrázky a kdy ne

Obrázky nepoužívejte jako odkaz ve chvíli kdy máte na stránce odkazů hodně (velikost omezuje rychlost). Naopak jsou dobrou možností pokud chcete mít na své stránce výjimečný design a pokud toho nebude moc. Většinou se po najetí kurzoru tento obrázek zamění za jiný - to lze vytvořit takto.

<a href="tlačítka.php3">
<img src= "../_img/lista.gif" onMouseOver="this.src= '../_img/lista2.gif'"
onMouseOut="this.src='../_img/lista.gif'">
</a>

A nebo lze udělat, že se daný obrázek trochu posune dolů a tím vytvoří dojem tlačítka.

<style>
a:hover {position: relative; top: 2px}
</style>
<a href="tlačítka.php3">
<img src="../_img/lista.gif" alt="lista">
</a>

Takže pomocí obrázků vytvoříte neobvyklý design.Zápory spočívají ve velikosti a pak v počtu.

Tagy <input> a <button>

Pomocí těchto tagů vytvoříte tohle. Tyto tagy se liší pouze syntaxí:

<input type="button" value="tohle">
<button>tohle</buton>

Což není nijak pěkné, ale lze to upravit pomocí CSS.Tím můžete změnit barvu textu, pozadí, ale hlavně se můžete zbavit toho ošklivého rámečku.

<input type="button" value="tlačítko" style="border: 1px solid gray;
background-color: white">

více o rámečcích a CSS

Pomocí CSS

To může vypadat třeba takhle, ale třeba i úplně jinak pouze jsme definovali třídu a jak v ní mají vypadat odkazy

<style>
a.opice  {border: outset 2px; text-decoration: none;}
a:link.opice, a:visited.opice {background-color: gray; color: white;}
a:hover.opice {background-color: #c4c4c4; color: white; border:
inset 2px}
</style>

Teď stačí jen kdekoli na stránce napsat

<a href="někam" class="opice">Odkaz</a>

Odkazy v tabulce

Mohou vypadat takto:

Zdrojový kód:

style type="text/css">
a:hover.x {background-color: orange; color: white}
</style>


<table>
<tr><td>Odkaz na CSS</td><td>Odkaz na JavaScript</td></tr><tr><td align="middle" ><a href="css.php" class="x" style="display:block">CSS</a></td><td align="middle"><a href="javascript.php" style="display:block" class="x">JavaScript</a></td></tr></table>

Nebo trochu složitěji

<style>

.z A:hover { background-color: orange; color: white;width: 100%; border:0px}
.c {color: white; background-color: orange; border: 0px"}
</style>
<table>
<table width="120" cellspacing="0" cellpadding="0">
<tr><td width="10" class="c">XHTML</td><td align="right" class="z">
<a href="#">více</a></td></tr>
</table>
<table width="120" cellspacing="0" cellpadding="0">
<tr><td width="10" class="c">CSS</td><td align="right" class="z">
aktuální"#">aktuální</a></td></tr>
</table>
<table width="120" cellspacing="0" cellpadding="0">
<tr><td width="50" class="c">SQL</td><td align="right" class="z">
<a href="#">více</a></td></tr>
</table>
<table width="120" cellspacing="0" cellpadding="0">
<tr><td width="30" class="c">JavaScript</td><td align="right" class="z">
<a href="#">odkaz</a></td></tr>
</table>

Další: Rámy

Navigace