Vazhdojmë me një artikull tjetër në serinë HTML, CSS dhe JavaScript , i cili sjell me vete një listë të mirë kodesh për të theksuar aspektin vizual ose përvojën e përdoruesit të faqes sonë të internetit; qoftë një tregti elektronike, një faqe uljeje apo edhe një blog.
Tani është koha të flasim për një element tjetër të rëndësishëm që mund të shkaktojë një thirrje për veprim dhe të çojë në blerje: ikonat që e çojnë përdoruesin te shporta e blerjeve dhe butonat. Butonat CSS që do të gjeni më poshtë janë falas dhe përfshijnë butona 3D, butona të mediave sociale, butona ndarjeje, butona kthimi në faqen kryesore dhe madje edhe butona zhbllokimi, ndër shumë të tjera.
Butoni 3D
Një buton 3D që bie në sy për thellësinë që krijon kudo që e vendosim, me efekte hijezimi që e bëjnë secilin prej elementëve vizualë të dallohet.
Butoni 3D për të shtypur
Ky buton 3D në CSS ka aftësinë që animacioni të fillojë të funksionojë ndërsa e zgjasim shtypjen e tij.
Butoni i kthimit
Ky buton CSS do të na çojë në krye të faqes sonë të internetit pasi ta kemi shfletuar atë.
Butoni i flluskës
Një buton në formë flluske në CSS dhe JavaScript që, kur shtypet, do të spërkatet me një seri flluskash me një animacion mbresëlënës dhe të përshtatshëm.
Butoni i shtimit
Një animacion elegant e sjell në jetë këtë buton shtimi CSS, i cili mund të jetë një nga ato elementë që e bën faqen tonë të internetit të dallohet.
Butoni i kompensimit të CSS
Ngjashëm me atë të mëparshmin, megjithëse me animacion paksa të ndryshëm . Mund të jetë ideal për një seri faqesh interneti me një temë specifike.
Mbyllja e butonit
Ne klikuam këtë buton në CSS dhe HTML për të aktivizuar një animacion mbyllës. I thjeshtë, por me një efekt vizual të shkëlqyer.
Butoni i mbylljes CSS
Në momentin që e mbajmë kursorin e miut mbi këtë buton mbylljeje, do të jemi në gjendje të zbulojmë animacionin cilësor që do të integrojmë në faqen e internetit.
Butoni i shkarkimit të CSS
Nëse kemi përmbajtje të shkarkueshme në faqen tonë të internetit, është e rëndësishme të kemi një buton të përshtatshëm që përdoruesit mund ta klikojnë lehtësisht. Ky buton bie në sy kur klikohet, duke shkaktuar një seri shkarkimesh të vogla në një animacion të ekzekutuar mirë.
Butoni i shkarkimit
Ky buton specializohet në animacion për të bërë të shfaqet një top i vogël që do të lëvizë nga njëra anë e shiritit në tjetrën për të nxjerrë në pah veprimin që ndërmerr përdoruesi kur klikon mbi shkarkimin.
Animacion i butonit të shkarkimit
Është një animacion mjaft i gjatë për një buton , por mund të jetë pikërisht ai detaj që i jep faqes suaj të internetit për shkarkimin e të gjitha llojeve të skedarëve një prekje profesionale.
Butoni i rri pezull
Ky buton po pret që ju të mbani kursorin e mausit mbi të, në mënyrë që të shihni animacionin e jashtëzakonshëm që krijon.
Butoni i zhurmës
Një tjetër buton për të mbajtur pezull që dallohet për animacionin elektrizues që ndodh kur lëvizni treguesin mbi të.
Efekti rri pezull
Një tjetër efekt interesant pezullimi në CSS që dallohet për animacionin e tij të shpejtë dhe të shkathët që prodhon ndjesi të mira.
Efekt elegant hover
Një buton që rri pezull me stil të shkëlqyer animacioni për faqet me një ndjesi klasike.
Efekti Gooey
Një efekt i thjeshtë dhe interesant që rrit madhësinë e butonit CSS me pak HTML.
Butoni i shiritit
Stripe njihet për punën e tij të shkëlqyer në dizajnin e ndërfaqes së përdoruesit të uebit ; ky buton Stripe është frymëzuar nga kjo, kështu që mund ta shtoni në faqen tuaj të internetit.
Tre efekte të butonit CSS
Tre efekte CSS në animacionin e butonave që mund t'i konsiderojmë shumë elegante.
Si butoni Twitter
Një buton "pëlqej" në Twitter me një animacion të shndritshëm dhe energjik. Perfekt për këto ditë të mediave sociale.
Si butoni i animacionit
Këtu , zemrat do të kërcejnë nga gëzimi kur të shtypet butoni "pëlqej".
Splat si buton
Një tjetër animacion shumë interesant dhe efektiv për një buton të ngjashëm me atë të mediave sociale.
Butoni i luajtjes
Butoni i luajtjes që do të fillojë të kërcejë, gjithashtu me gëzim , kur të shtypet.
Butoni CSS i riprodhimit
Një animacion do të fshijë rrethin që rrethon ikonën e luajtjes së këtij butoni CSS.
Butoni i pauzës / luajtjes
Thjesht një buton pauzë/luajtje me një prekje dizajni minimalist .
Buton retro i thjeshtë
Sikur të ishim duke shtypur butonat në një kontrollues lojërash të një konsole si Xbox.
Butoni i ylberit
Një buton me një animacion ylberi që rikrijon njoftimet që mbërrijnë në Galaxy S8.
Butoni social
Një sirtar që hapet me ikona të rrjeteve sociale të njohura për të gjithë kur mbani kursorin e miut mbi të.
Animacion lundrues
Një buton me një animacion cilësor që aktivizohet në momentin që e shtypim.
Ikona 3D sociale
Një efekt tërheqës për syrin që ndodh kur e lëmë treguesin të pushojë mbi të.
Butonat socialë
Këto butona socialë përdorin një animacion që ndryshon ngjyrë nga lart për t'u dalluar nga pjesa tjetër.
Butonat socialë kubikë
Këto butona janë të vendosura në një kub që lëviz në mënyrë perfekte kur e vendosim treguesin mbi të.
Butonat e ndarjes
Një buton ndarjeje që dallohet për animacionin e tij të përsëritjes së pafundme.
Butoni i ndarjes së mediave sociale në SVG
Thjesht shtypni butonin e ndarjes dhe do të zbuloni efektin hyjnor që prodhon ky buton i mediave sociale.
Butoni i ndarjes së Gooey
Me një tjetër animacion "Ngjitës" , ky buton është mjaft tërheqës për shkak të efektit që prodhon.
pjesë
Ky buton është i ndarë në katër seksione të ndryshme, kështu që mund të zgjidhni rrjetin social ku do të publikoni përmbajtjen e ndarë drejtpërdrejt.
Butoni i rishikimeve të yjeve
Një buton që rri pezull mbi të që mbledh rezultatin që do të jepni kur e lini treguesin mbi të.
Butoni i rezultatit SVG
Një tjetër buton që rri pezull për të vlerësuar një produkt ose çfarëdo qoftë.
Butoni i karikimit
Klikimi i butonit të ngarkimit do të fillojë procesin e shkarkimit ose çfarëdo që është më e përshtatshme për faqen tuaj të internetit.
Butoni i pranimit
Thjesht klikoni mbi të dhe një formular ose çdo veprim tjetër që kërkon miratimin e përdoruesit në faqen tonë të internetit do të pranohet.
Butoni i rrëshqitjes
I projektuar për pajisje mobile , ky buton duhet të shtypet për t'u zhvendosur në anë me atë gjest tipik të telefonit inteligjent.
Zhvendos gjestin
Një rrëshqitje e thjeshtë me gisht ose stilolaps do ta zhbllokojë pajisjen tuaj. Një tjetër buton ideal për pajisjet mobile.