Jednoduché HTML tlačítko pro vaše webové stránky
<input type="button" value="input"/> <button type="button">button</button>
Jak se dělá tlačítko na CSS
Z odkazu, tagu <span> nebo <div> můžeme vytvořit pomocí CSS velmi pěkné tlačítko.
Zobrazit popis
<a href="#" class="tlacitko">Zobrazit popis</a>
Dynamické efekty realizovány prostřednictvím pseudotříd:
- :hover — tato pseudotřída je aktivovaná, pokud uživatel přejede kurzorem nad odkazem
- :active — daný odkaz byl uživatelem aktivován (což v praxi znamená, že uživatel nad odkazem zmáčknul tlačítko myši a ještě jej nepustil)
- :focus — odkaz byl “zaměřen” (např. pomocí klávesy TAB).
Kód tlačítka pro vaše webové stránky
Někdy nejjednodušší vzhled může vypadat stylovější...
Přidat do košíku
<a href="#" class="button7">Přidat do košíku</a>
<a href="#" class="button7">Připojit</a>Submit
<a href="#" class="button24">Submit</a>
Tlačítko s gradientem
Koupit<a href="#" class="button10">Koupit</a>Rezervovat
<a href="#" class="button12" tabindex="0">Rezervovat</a>
Docela populární je rozdělení tlačítek na dvě barvy
Přidat do košíku
<a href="#" class="button25">Přidat do košíku</a>
Krásná tlačítka CSS
10 999,- Kč
<a href="#" class="button11">10 999,- Kč</a>
Stejně jako u Googlu
<a href="#" class="button15">Stejně jako u Googlu</a>
<a href="#" class="button17" tabindex="0">Stejně jako u Mozilly</a>
Objednat
<a href="#" class="button21">Objednat</a>
<a href="#" class="button28">Instalovat</a>
Tlačítka "Download" CSS
Stáhnout zdarma prvních 30 dnů
<a href="#" class="button13">Stáhnout zdarma prvních 30 dnů</a>
stáhnout
<a href="#" class="button14">stáhnout</a>
Stylizace tlačítek pomocí CSS
Animované tlačítko: "záření textu"
<input type="button" class="button4" value="Koupit">
<input type="button" class="tlacitko01" value="Submit">
Styl tlačítek se skvrnami světla
Lesklé tlačítko
<a href="#" class="button1">Lesklé tlačítko</a>
<a href="#" class="button9">Skleněná</a>
Objednat lístky
<a href="#" class="tlacitko01">Objednat lístky</a>
Tlačítka menu
<a href="#" class="button5" data-twitter>twitter</a>
<a href="#" class="button16">tlačítko</a>
<a href="#" class="button18" tabindex="0">tlačítko</a>
<a href="#" class="button27">1</a>
Trojrozměrné tlačítko CSS
Trojrozměrné
<a href="#" class="button19">Trojrozměrné</a>
tlačítko
<a href="#" class="button">tlačítko</a>
objednat
<a href="#" class="button20">objednat</a>
vložit do košíku
<a href="#" class="button23">vložit do košíku</a>
Vtlačené tlačítko
Upravit
<a href="#" class="button22">Upravit</a>
Konvexní tlačítko HTML
<a href="#" class="boxShadow4">KONVEXNÍ</a>
Kulatá CSS tlačítka
<a href="#" class="button29"></a>
+
<a href="#" class="button30">+</a>
Animované tlačítko CSS
<a href="#" class="button26" tabindex="0"><span></span></a>
<a href="#" class="button31" tabindex="0"></a>
3d tlačítko CSS
<a href="#" class="button2" tabindex="0">DOZVĚDĚT SE VÍCE</a>