Mobilné Správy, Gadgety, Blogy's Secenziami

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.

Table of Contents