10 bezplatn├Żch vysoko kvalitn├Żch kni┼żn├şc a r├ímcov CSS

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├şskavanie ─Ćal┼í├şch inform├íci├ş o slu┼żbe, potvrdzovanie na┼íich rozhodnut├ş a zasielanie kontaktn├Żch formul├írov.

Takto je kliknutie na tla─Źidlo nie─Źo ako ├║spe┼ín├Ż n├ívrh├ír z├íverov, ktor├Ż sa sna┼ż├ş dosiahnu┼ą. Preto je tak├ę d├┤le┼żit├ę zvoli┼ą tla─Źidl├í, ktor├ę vyzeraj├║ dobre a poskytuj├║ zrejm├ę vizu├ílne podnety.

S t├Żmto vedom├şm sme na┼íli 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 v ┼ít├Żle svetla s r├┤znymi tvarmi, ve─żkos┼ąami a farbami. V┼íetky ┼ít├Żly je mo┼żn├ę vyvola┼ą pomocou jednoduch├Żch n├ízvov tried. V─Ćaka minimalizovan├ęmu s├║boru CSS prich├ídzaj├║cemu na 4 kb je t├íto kni┼żnica tie┼ż dos┼ą ─żahk├í.

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├í a minimalistick├í kl├ívesnica Mu a Phi. Nezabudnite si pozrie┼ą uk├í┼żkov├ę efekty kliknutia v uk├í┼żke.

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

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

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

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

Tla─Źn├ę tla─Źidl├í – tla─Źite─żn├ę 3D tla─Źidl├í CSS

Tla─Źidl├í nemusia by┼ą tou naj┼ít├Żlovej┼íou sadou, ktor├║ n├íjdete, ale s├║ farebn├ę a ─żahko vidite─żn├ę v dave. Navy┼íe poskytuj├║ mimoriadne uspokojiv├ę odrazy po kliknut├ş. Nakoniec, nie je to v┼íetko, ─Źo skuto─Źne potrebujeme pomocou gomb├şka?

Tla─Źn├ę tla─Źidl├í - tla─Źite─żn├ę 3D tla─Źidl├í CSS

btns.css – mal├Ż r├ímec 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 prechodmi farieb na zvitku a dokonca aj verziami, ktor├ę sa bud├║ roz┼íirova┼ą a zmen┼íova┼ą.

btns.css - mal├Ż r├ímec tla─Źidiel CSS pre osobn├ę a komer─Źn├ę pou┼żitie

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

Press.css poskytuje skvelo vyzeraj├║ce ploch├ę 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). Pracuj├║ tie┼ż hladko s ikonami FontAwesome.

Press.css - ploch├í, ─ż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 funkcie FontAwesome

Zauj├şmav├í verzia tradi─Źn├ęho tla─Źidla ikon, efekty CSS3 Button Hover Effects a FontAwesome ikonu odha─żuj├║ iba po─Źas rolovania. Podr┼żan├şm kurzora aktivujete plynul├Ż prechod CSS, ktor├Ż zobrazuje ikonu FontAwesome v jednoduchom zobrazen├ş, ved─ża textu alebo namiesto textu. S├║─Źas┼ą ve─żkej zbierky tla─Źidiel CSP CodePen.

Efekty pos├║vania tla─Źidla CSS3 pomocou funkcie 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├í pre Bootstrap kombinuj├║ dobro r├ímca Bootstrap s ikonami FontAwesome. Zahrnut├ę s├║ v┼íetky hlavn├ę soci├ílne siete, celkovo viac ako 20. Pre ka┼żd├║ sie┼ą existuj├║ triedy spolu s triedami 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

beautons – ├Ü┼żasne jednoduch├Ż gomb├şk na n├íradie

beautons je kni┼żnica tla─Źidiel, ktor├í je o jednoduchosti. Vyberte si z r├┤znych ve─żkost├ş tla─Źidiel, ┼ít├Żlov a stavov. Triedy CSS je mo┼żn├ę kombinova┼ą tak, aby kombinovali r├┤zne ┼ít├Żly.

beautons - ├Ü┼żasne jednoduch├Ż gomb├şk na n├íradie

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

Vidite─żn├ę tla─Źidl├í s├║ postaven├ę na LESS a 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 absolvent a absolvent 3,0 ├║plne ploch├ę

Webov├ę tla─Źidl├í Orman Clark 3D

Robustn├ę 3D web gomb├şky od Ormana Clarka nie s├║ iba kolekciou sexy gomb├şkov. Je to tie┼ż kompletn├Ż n├ívod, ktor├Ż ukazuje, ako boli vyroben├ę. Tak┼że m├┤┼żete za─Źa┼ą so z├íkladmi a pokra─Źova┼ą v prid├ívan├ş vlastn├Żch dotykov.

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 opakovan├Żm po─Źtom opakovan├ş. V├Żsledkom je z├íbavn├ę tla─Źidlo, ktor├ę upozor┼łuje.

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

Je to o t├Żch kliknutiach

Pri zostavovan├ş webovej str├ínky je ─Źasto mo┼żn├ę prehliada┼ą tla─Źidl├í. Koniec koncov, spravidla nezaberaj├║ ve─ża miesta na obrazovke a nie s├║ to najzauj├şmavej┼íie kon┼ítruk─Źn├ę prvky. Napriek tomu pomocou spr├ívneho m├┤┼żete upozorni┼ą a povzbudi┼ą kliknutie. V┼íimnite si, ako niektor├ę z vy┼í┼íie uveden├Żch kni┼żn├şc pou┼ż├şvaj├║ zauj├şmav├ę efekty pos├║vania a klikania. Tieto typy efektov m├┤┼żu tla─Źidl├ím doda┼ą trochu funk─Źnej z├íbavy a zv├Ż┼íi┼ą celkov├Ż dojem pou┼ż├şvate─ża.

Ke─Ć nabud├║ce navrhnete webov├║ str├ínku alebo pracujete na v├Żzve na akciu (CTA), pova┼żujte tla─Źidl├í za viac ako iba kon┼ítruk─Źn├Ż prvok. Myslite na ne ako na br├ínu k cie─żom va┼íich str├ínok. Pou┼ż├şvanie jednej z vy┼í┼íie uveden├Żch kni┼żn├şc m├┤┼że skuto─Źne zmeni┼ą v├í┼í konverzn├Ż pomer.