10 bezplatn├Żch vysoko kvalitn├Żch kni┼żn├şc CSS a ┼ítrukt├║r gomb├şkov

Ke─Ć o tom prem├Ż┼í─żate, tla─Źidl├í s├║ hnac├şmi prvkami interakcie online. Pou┼ż├şvame ich na prid├ívanie produktov do na┼íich n├íkupn├Żch voz├şkov, z├şskanie ─Ćal┼í├şch inform├íci├ş o slu┼żbe, potvrdenie na┼íich rozhodnut├ş a odoslanie kontaktn├Żch formul├írov.

Kliknutie na tla─Źidlo je teda nie─Źo ako ├║spe┼ín├ę z├ívery, ku ktor├Żm sa dizajn├ęri sna┼żia dospie┼ą. Preto je tak├ę d├┤le┼żit├ę zvoli┼ą dobre vyzeraj├║ce tla─Źidl├í a poskytn├║┼ą zrete─żn├ę vizu├ílne prvky.

S t├Żmto vedom├şm nach├ídzame zbierku kni┼żn├şc tla─Źidiel CSS, ktor├ę m├┤┼żete pou┼żi┼ą na zv├Ż┼íenie interakcie vo va┼íich vlastn├Żch webov├Żch projektoch. U┼żite si to!

bttn.css – ├║┼żasn├ę tla─Źidl├í pre ├║┼żasn├ę projekty

Bttn.css je zbierka tla─Źidiel s jasn├Żm ┼ít├Żlom, s r├┤znymi tvarmi, ve─żkos┼ąami a farbami. V┼íetky ┼ít├Żly je mo┼żn├ę vola┼ą jednoduch├Żmi n├ízvami tried. V─Ćaka minimalizovan├ęmu s├║boru CSS, ktor├Ż dosahuje iba 4 kB, je t├íto kni┼żnica tie┼ż pomerne ─żahk├í.

bttn.css - ├║┼żasn├ę tla─Źidl├í pre ├║┼żasn├ę projekty

Tla─Źidl├í: zbierka tla─Źidiel CSS

N├ízov m├┤┼że by┼ą jednoduch├Ż, ale Buttons je kni┼żnica s viac ako 20 kolekciami ┼ít├Żlov, z ktor├Żch si m├┤┼żete vybra┼ą. Medzi najd├┤le┼żitej┼íie patr├ş mierne sklovit├í delta, z├íbavn├í a odv├í┼żna Theta, priestrann├í, minimalistick├í kl├ívesnica a Mu a Phi. Nezabudnite sa pozrie┼ą na pr├ívne ├║─Źinky kliknut├şm na uk├í┼żku.

Tla─Źidl├í: zbierka tla─Źidiel CSS

Buttons: kni┼żnica tla─Źidiel CSS vytvoren├í pomocou programu Sass & Compass

Nemalo by sa to zamie┼ła┼ą s ostatn├Żmi kni┼żnicami naz├Żvan├Żmi ahem, Buttons. T├íto kni┼żnica obsahuje atrakt├şvne a jednoduch├ę tla─Źidl├í CSS nieko─żk├Żmi sp├┤sobmi. Medzi ─Ćal┼íie doplnky patria ┼ít├Żly tla─Źidiel ikon, ktor├ę pou┼ż├şvaj├║ FontAwesome.

Buttons: kni┼żnica tla─Źidiel CSS vytvoren├í pomocou programu Sass & Compass

Pushy Buttons – Stl├í─Źate─żn├ę tla─Źidl├í CSS v 3D

Tla─Źidl├í nemusia by┼ą tou najelegantnej┼íou sadou, ktor├║ n├íjdete, ale s├║ farebn├ę a ─żahko vidite─żn├ę v dave. Okrem toho poskytuj├║ po kliknut├ş zvl├í┼ítny uspokojiv├Ż skok. Nakoniec, nie je to v┼íetko, ─Źo skuto─Źne potrebujeme pomocou gomb├şka?

Pushy Buttons - Stl├í─Źate─żn├ę tla─Źidl├í CSS v 3D

btns.css – mal├í ┼ítrukt├║ra tla─Źidiel CSS pre osobn├ę a komer─Źn├ę pou┼żitie

Osobne sa mi p├í─Źia tla─Źidl├í, ktor├ę vyu┼ż├şvaj├║ plynul├ę prechody CSS. Btns.css odv├ídza skvel├║ pr├ícu s jemn├Żmi farebn├Żmi prechodmi na pergamene a dokonca aj verziami, ktor├ę sa bud├║ roz┼íirova┼ą a zmen┼íova┼ą.

btns.css - mal├í ┼ítrukt├║ra tla─Źidiel CSS pre osobn├ę a komer─Źn├ę pou┼żitie

Press.css – jednoduch├í, ─żahk├í a ┼ík├ílovate─żn├í kni┼żnica tla─Źidiel ovplyvnen├í pokynmi spolo─Źnosti Google pre dizajn materi├ílov

Press.css poskytuje skvel├ę jednoduch├ę tla─Źidl├í v akejko─żvek ve─żkosti, tvare a farbe, ktor├ę potrebujete. Pri zahrnut├ş iba troch efektov sa ve─żkos┼ą k├│du udr┼żuje na minime (12 kb). Dokonale funguj├║ aj s ikonami FontAwesome.

Press.css: jednoduch├í, ─żahk├í a ┼ík├ílovate─żn├í kni┼żnica tla─Źidiel ovplyvnen├í pokynmi spolo─Źnosti Google pre dizajn materi├ílov

Efekty pos├║vania tla─Źidla CSS3 pomocou programu FontAwesome

Zauj├şmav├í verzia tradi─Źn├ęho tla─Źidla ikon, efekty CSS3 Hover Effects a FontAwesome, ikonu odha─żuj├║ iba po─Źas rolovania. Podr┼żan├şm kurzora my┼íi nad tla─Źidlom sa aktivuje plynul├Ż prechod CSS, ktor├Ż zobrazuje na plochom displeji ikonu FontAwesome ved─ża textu alebo namiesto neho. S├║─Źas┼ą ve─żkej zbierky tla─Źidiel CSP CodePen.

Efekty pos├║vania tla─Źidla CSS3 pomocou programu FontAwesome

Soci├ílne tla─Źidl├í pre Bootstrap: tla─Źidl├í soci├ílneho prihl├ísenia vyroben├ę v ─Źisto CSS na z├íklade Bootstrap a Font Awesome

Soci├ílne tla─Źidl├í Bootstrapu kombinuj├║ kvalitu ┼ítrukt├║ry Bootstrapu s ikonami FontAwesome. Zahrnut├ę s├║ v┼íetky hlavn├ę soci├ílne siete, celkovo viac ako 20. Existuj├║ triedy pre ka┼żd├║ sie┼ą, ako aj triedy pre r├┤zne ve─żkosti. Farby s├║ vyroben├ę tak, aby zodpovedali ka┼żdej pr├şslu┼ínej slu┼żbe.

Soci├ílne tla─Źidl├í pre Bootstrap: tla─Źidl├í soci├ílneho prihl├ísenia vyroben├ę v ─Źisto CSS na z├íklade Bootstrap a Font Awesome

kr├ísy – ├║┼żasne jednoduch├í sada n├íradia

beautons je kni┼żnica tla─Źidiel, ktor├í sa zaober├í jednoduchos┼ąou. Vyberte si z r├┤znych ve─żkost├ş, ┼ít├Żlov a stavov tla─Źidiel. Triedy CSS je mo┼żn├ę kombinova┼ą tak, aby zodpovedali r├┤znym ┼ít├Żlom.

kr├ísy - ├║┼żasne jednoduch├í sada n├íradia

Zrejm├ę tla─Źidl├í: alternat├şva zav├ídzania medzi 2,0 promoval a 3,0 ├║plne ploch├ę

Vidite─żn├ę tla─Źidl├í, ktor├ę s├║ postaven├ę na LESS, s├║ farebn├ę, atrakt├şvne a ─żahko prisp├┤sobite─żn├ę. Po kliknut├ş tie┼ż poskytuj├║ jednoduch├Ż animovan├Ż efekt.

Zrejm├ę tla─Źidl├í: alternat├şva zav├ídzania medzi 2,0 promoval a 3,0 ├║plne ploch├ę

Robustn├ę webov├ę tla─Źidl├í Orman Clark

Robustn├ę webov├ę tla─Źidl├í 3D od Ormana Clarka nie s├║ iba kolekciou sexy tla─Źidiel. Je to tie┼ż kompletn├Ż n├ívod, ktor├Ż ukazuje, ako boli vyroben├ę. Tak┼że m├┤┼żete za─Źa┼ą z├íklady a prid├íva┼ą vlastn├ę zvonenia.

Siln├ę 3D tla─Źidl├í Orman Clark - verzia CSS3

R├ídioakt├şvne tla─Źidl├í – Vytv├írajte atrakt├şvne a atrakt├şvne tla─Źidl├í pomocou anim├íci├ş CSS

─îo odde─żuje r├ídioakt├şvne tla─Źidl├í, s├║ zauj├şmav├ę efekty pos├║vania, ktor├ę je mo┼żn├ę prida┼ą. Napr├şklad rolovanie m├┤┼że sp├┤sobi┼ą jemn├║ pulzuj├║cu zmenu farby (akoby tla─Źidlo bolo skuto─Źne r├ídioakt├şvne). To sa dosiahne opakovan├şm prechodu CSS v stanovenom po─Źte opakovan├ş. V├Żsledkom je z├íbavn├ę tla─Źidlo, ktor├ę up├║ta pozornos┼ą.

R├ídioakt├şvne tla─Źidl├í - Vytv├írajte atrakt├şvne a atrakt├şvne tla─Źidl├í pomocou anim├íci├ş CSS

Ide o tieto kliknutia

Pri nastavovan├ş webovej str├ínky je mo┼żn├ę vo v┼íeobecnosti ignorova┼ą tla─Źidl├í. Koniec koncov, spravidla nezaberaj├║ ve─ża miesta na obrazovke a nie s├║ najzauj├şmavej┼í├şm dizajnov├Żm prvkom. Napriek tomu pomocou spr├ívneho m├┤┼żete z├şska┼ą pozornos┼ą a povzbudi┼ą kliknutie. V┼íimnite si, ko─żko z vy┼í┼íie uveden├Żch kni┼żn├şc vyu┼ż├şva zauj├şmav├ę efekty klikania a pos├║vania. Tieto typy efektov m├┤┼żu tla─Źidl├ím prinies┼ą ur─Źit├║ funk─Źn├║ z├íbavu a vylep┼íi┼ą celkov├Ż dojem pou┼ż├şvate─ża.

Pri najbli┼ż┼íom vytvoren├ş webovej str├ínky alebo pr├íci na v├Żzve na akciu (CTA) pova┼żujte tla─Źidl├í za viac ako len za dizajnov├Ż prvok. Myslite na ne ako na br├ínu k cie─żom va┼íich webov├Żch str├ínok. Pou┼ż├şvanie jednej z vy┼í┼íie uveden├Żch kni┼żn├şc m├┤┼że skuto─Źne zmeni┼ą v├í┼í konverzn├Ż pomer.