Odkaz jako tlačítko

Element <button>

Asi nejjednodušší způsob vytvoření odkazu, který vypadá jako tlačítko je použití značky <button> uvnitř odkazu. Problém je, že Internet Explorer 8 a starší takový odkaz neproklikne.

<a href="#"><button>Text „odkazu“</button></a>

Jde to řešit JavaScriptem:

Ale lepší bude…

Úprava CSS

Druhá možnost je použít CSS a odkaz nastylovat jako tlačítko nebo naopak udělat tlačítko vypadající jako běžný odkaz.

Odkaz jako tlačítko

Budeme vycházet z toho, že běžné tlačítko má minimálně:

  • pozadí (background),
  • rámeček (border),
  • nějaký padding,
  • :hover, :active a :focus efekty,
  • není podtržené text-decoration: none,
  • nemá kursor ručičky (cursor: pointer),
  • může mít jiný font,
  • může mít kulaté rohy (border-radius – IE9+).
a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
a.tlacitko:hover {background: #E371AF}
a.tlacitko:active {position: relative; top: 1px; left: 1px}

To je odkaz — vypadá jako tlačítko.

Tlačítko jako odkaz

Při obráceném postupu je naopak potřeba tlačítko odstrojit do podoby odkazu — tj. výše uvedené (rámečky, pozadí, odsazení apod.) resetovat a nastavit do podoby odkazu.

To je — ale vypadá podobně jako odkaz.

.ne-tlacitko {background: none; color: #D62988; padding: 0; border: 0; text-decoration: underline; cursor: pointer; font: inherit}

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Označení externích odkazů

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

Lepší podtržení odkazu

Lepší podtržení odkazu

Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

Odkaz přes celý box

Odkaz přes celý box

Jak udělat, aby celý box s několika prvky byl klikací.

Ikonka vedle odkazu

Ikona vedle odkazu

Jak přidat a zarovnat ikonku vedle odkazu, který má podtržení.

Stylování formulářových prvků

Vlastní vzhled formulářů

Jak vytvořit originálně vypadající formulář, aniž by házel uživatelům klacky pod nohy?

Komentáře