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.