Příklady CSS3 tlačítek

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:

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>
Připojit


<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>

Stejně jako u Mozilly



<a href="#" class="button17" tabindex="0">Stejně jako u Mozilly</a>

Objednat



<a href="#" class="button21">Objednat</a>
Instalovat


<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>
Skleněná


<a href="#" class="button9">Skleněná</a>

Objednat lístky



<a href="#" class="tlacitko01">Objednat lístky</a>
twitter Facebook


<a href="#" class="button5" data-twitter>twitter</a>
Dvořák Smetana Janáček


<a href="#" class="button16">tlačítko</a>
Johan Gregor MendelJan Evangelista PurkyněSigmund Freud


<a href="#" class="button18" tabindex="0">tlačítko</a>
1 2 3


<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

KONVEXNÍ



<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

DOZVĚDĚT SE VÍCE



<a href="#" class="button2" tabindex="0">DOZVĚDĚT SE VÍCE</a>