41 tasuta CSS-nuppu koos väikese JavaScripti abil

Jätkame järgmise artikliga seerias HTML, CSS ja JavaScript mis toob a kena nimekiri koodidest, millega rõhutada meie veebisaidi visuaalne välimus või kasutajakogemus; olgu see siis e-kaubandus, sihtleht või ajaveeb ise.

See puudutab hetke veel ühe olulise elemendiga, milleks on võimalik kutsuge üles tegutsema nii et ikoon, mis viib kasutaja ostukorvi, nupud, muutuksid ostudeks. CSS-nupud, mille leiate allpool, on tasuta ja koosnevad 3D-nuppudest, mis on mõeldud suhtlusvõrgustike jaoks, jagamiseks, algusesse naasmiseks või teiste avamiseks.

3D-nupp

3D-nupp, mis paistab silma sügavuse jaoks, mida see põhjustab kuhu iganes me läheme, paigutades selle varjutusefektidega, mis muudavad kõik visuaalsed elemendid silma.

3D-nupp vajutamiseks

see 3D-nupp CSS-is Sellel on võime, et animatsioon hakkab käima, kui pikendame selle pulsatsiooni.

Tagasi nupp

See CSS-nupp viib meid meie veebisaidi tippu kui oleme selle läbi liikunud.

Mullinupp

Mulliklahv CSS-is ja JavaScripti klõpsamisel pritsib mullide seeria silmatorkava ja asjakohase animatsiooniga.

Nupp Lisa

A. graatsiline animatsioon annab sellele CSS-i lisamisnupule elu, mis võib olla üks neist elementidest, mis meie veebisaidi esile tõstavad.

Nupp CSS Offset

Sarnane eelmisega, kuigi veidi erineva animatsiooniga. See võib olla ideaalne teatud veebisaitide seeria jaoks.

Nuppude sulgemine

Me vajutame seda nupp CSS-is ja HTML-is lõpuanimatsiooni tootmiseks. Lihtne, kuid suurepärase visuaalse efektiga.

CSS-i sulgemisnupp

Sel ajal, et jätame hiirekursori Sellel sulgemisnupul saame teada kvaliteetanimatsiooni, mille integreerime veebis.

CSS-i allalaadimise nupp

Kui meil on oma veebisaidil allalaaditavat sisu, on see oluline olgem kasutaja jaoks sobiv nupp selle õigeks saamiseks kiiresti pulsil. See nupp paistab silma vajutades silma ja kukutab hästi tehtud animatsioonis hulga väikseid šokke.

Nupp Allalaadimine

See nupp on spetsialiseerunud animatsioonidele tõsta väike pall mis liigub riba ühelt küljelt teisele, et panna meid esile toimingut, mida kasutaja allalaadimisel klõpsates teeb.

Allalaadimisnupu animatsioon

A. nupu jaoks üsna pikk animatsioon, kuid see võib olla see detail, mis pakub teie veebisaidile professionaalsust igat tüüpi failide allalaadimiseks.

Hõljutage nuppu

See nupp ootab teid jätke hiirekursor ülal, nii et näete selle loodud silmapaistvat animatsiooni.

Müra nupp

Veel üks hiirenupp, mis paistab silma elektriseeriv animatsioon mis juhtub kursori kohal hõljutades.

Hõljusefekt

Veel üks huvitav hõljumisefekt CSS-is, mis paistab silma kiire ja vilgas animatsioon mis tekitab häid aistinguid.

Stiilne hõljumisefekt

Üks nupp hõljutab suurepärase stiiliga klassikalise hõnguga saitide animatsioonis.

Gooey efekt

Un lihtne ja uudishimulik efekt mis suurendab HTML-i abil CSS-nupu suurust.

Triibunupp

Triip on tuntud selle poolest suurepärane töö teie veebisaidi kasutajaliidese kujundamisel, see nupp Stripe on inspireeritud, et saaksite selle oma veebisaidile viia.

Kolm CSS-nupu efekti

Kolm CSS-efekti nupu animatsioonis ja võime kaaluda suurepärast stiili.

Nagu Twitteri nupp

Nupp meeldimisi Twitteris sädeleva ja energilise animatsiooniga. Ideaalne nendeks sotsiaalmeedia päevadeks.

Nagu animatsiooninupp

Siin saavad südamed need, kes hüppavad rõõmust, kui sarnast nuppu vajutatakse.

Splat like like nupp

Teine väga uudishimulik, suurepärase efektiga animatsioon sarnase nupu jaoks sotsiaalvõrgustike jaoks.

Esitusnupp

Alustatakse nuppu Esita hüpata, ka rõõmuks, kui seda vajutada.

CSS-i taasesituse nupp

Animatsioon kustutab ikooni ümbritsev ümbermõõt Selle CSS-nupu taasesitus.

Paus / esitusnupp

Ainult üks nupp pausi / mängida minimaalse puudutusega Kujunduses.

Retro lihtne nupp

Nagu oleksime vajutanud nupud mängukontrolleril konsoolilt nagu XboX.

Vikerkaare nupp

Nupp a-ga vikerkaare animatsioon see loob Galaxy S8-le saabunud teated.

Sotsiaalne nupp

Sahtel, mis avaneb populaarsed sotsiaalmeedia ikoonid jättes hiirekursori sellele.

Ujuv animatsioon

Nupp a-ga kvaliteetne animatsioon see käivitub hetkel, kui sellel klõpsame.

3D sotsiaalsed ikoonid

Un tähelepanu köitev efekt ja see juhtub siis, kui jätame kursori puhkama.

Sotsiaalsed nupud

Need sotsiaalsetes nuppudes kasutatakse animatsiooni See muudab värvi ülevalt, et eristuda muust.

Kuupilised sotsiaalnupud

Need nupud on asub kuubis mis liigub suurepäraselt, kui jätame sellele kursori.

Jaga nuppe

Un jagamisnuppu eristab lõpmatu tsükliline animatsioon.

Sotsiaalmeedia jagamise nupp SVG-s

Vajutage lihtsalt jagamisnuppu ja leiad jumaliku efekti mis juhtub selles sotsiaalmeedia nupus.

Gooey jagamise nupp

Koos teisega animatsioon «Gooey», on see nupp avaldatava efekti jaoks väga silmatorkav.

osa

see nupp on jagatud neljaks erinevaks et saaksite valida suhtlusvõrgustiku, kus avaldate otse jagatud sisu.

Tärnide arvustuste nupp

Nupp kursor, mis kogub skoori mida kavatsete anda, kui jätate kursori poseeritud.

SVG skoorinupp

Teine hõljutusnupp hindega hindama toode või mis iganes.

Laadimisnupp

Vajutades nuppu üleslaadimise nupp alustab allalaadimist või mis teie veebisaidile kõige paremini sobib.

Nõustunupp

Vajutage seda ja vorm võetakse vastu või mis tahes muu tegevus mis vajab meie veebisaidi kasutaja kinnitust.

Pühkimisnupp

Pühendatud mobiilseadmetele, tuleb seda nuppu vajutada, et see tavapärase nutitelefoni žestiga küljele viia.

Ava žest

Un küljeliigutus sõrme või osutiga ja me avame terminali ise. Veel üks ideaalne nupp mobiilile.