Tak tohle jsou úplně normální odkazy, jenom trochu upravené globálním stylopisem. Jak vypadá ten stylopis:
a { padding: 20px; height: 40px; border: outset 8px ; font-weight: bold;
text-decoration: none}
a:link, a:visited {background-color: navy; color: white;}
a:hover {background-color: blue; color: yellow; border: inset 8px}
Příklad se správně vykreslí v IE 5.5. Ve verzi 5.0 to občas (nevím proč) nefunguje. Ve verzi IE 4 (asi 20% uživatelů v roce 2001, 0,5% v roce 2003) se aplikují pouze barvy (ne okraje ani velikost). V Netscape 4 se tlačítko nemění při přejetí myší, protože Netscape 4 nepodporuje a: hover. V Mozille (která a:hover podporuje) se správně počítá padding, takže se odkazy rozšiřují i přes ostatní text. Je tedy dobré držet se při zemi a zadávat menší vnitřní okraje, nebo nastavit celému odstavci margin, případně výšku řádku (line-height).
Výše uvedená deklarace je dost nešikovná, protože udělá tlačítkové všechny odkazy (jak je asi vidět). Na deklarování tlačítkových odkazů je proto dobré vytvořit si třídu odstavce (třeba "tlacitko") a tlačítkové odkazy umísťovat do tohoto odstavce. Ve stylopisu se pak používá
třída a kontextová deklarace. Jen ilustračně:
p.tlacitko a {padding....
Podobný příklad:
Obrázek v tlačítku se v Mozille a v Opeře vykreslí mimo tlačítko :-(
Příklad se vztahuje k textu zdokonalení odkazů.