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. Ve verzi IE 4 (asi 20% uživatelů v roce 2001) 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 Netscapu 6 (který a:hover podporuje) se humpolácky 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.
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 Netscape 6 vykreslí mimo tlačítko :-(