41 tasuta CSS-nuppu koos väikese JavaScripti abil

Tasuta CSS-nupud

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

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

3D-nupp vajutamiseks

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

Tagasi nupp

Tagasi nupp

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

Mullinupp

Mullinupp

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

Nupp Lisa

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

Tasakaalustama

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

Nuppude sulgemine

lähedal

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

CSS-i sulgemisnupp

CSS-i sulgemisnupp

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

CSS-i allalaadimise nupp

CSS-i allalaadimisnupp

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

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

Animatsiooni allalaadimine

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

Hõljutage nuppu

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

Müra nupp

Müra nupp

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

Hõljusefekt

Hõljusefekt

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

Stiilne hõljumisefekt

Hõljutatud stiil

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

Gooey efekt

Gooey efekt

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

Triibunupp

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 efekti

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

Nagu Twitteri nupp

Nagu Twitteri nupp

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

Nagu animatsiooninupp

Nagu animatsiooninupp

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

Splat like like nupp

Tähis

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

Esitusnupp

Paljundamine

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

CSS-i taasesituse nupp

CSS taasesitus

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

Paus / esitusnupp

Taasesituse paus

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

Retro lihtne nupp

Retro

Nagu oleksime vajutanud nupud mängukontrolleril konsoolilt nagu XboX.

Vikerkaare nupp

Vikerkaar

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

Sotsiaalne nupp

sotsiaal-

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

Ujuv animatsioon

Ujuv animatsioon

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

3D sotsiaalsed ikoonid

3D sotsiaalsed ikoonid

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

Sotsiaalsed nupud

Sotsiaalsed nupud

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

Kuupilised sotsiaalnupud

Kuupilised sotsiaalnupud

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

Jaga nuppe

Jaga nuppe

Un jagamisnuppu eristab lõpmatu tsükliline animatsioon.

Sotsiaalmeedia jagamise nupp SVG-s

Jaga nuppe svg

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

Gooey jagamise nupp

Jaga Gooey

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

osa

osa

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

Tärnide arvustuste nupp

Tärnide arvustuste nupp

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

SVG skoorinupp

Score SVG nupp

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

Laadimisnupp

Laadimisnupp

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

Nõustunupp

nuppu

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

Pühkimisnupp

Kaevukook

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

Ava žest

Ava žest

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


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

2 kommentaari, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   Nelson DIJO

    Suur panus sõber, aitäh

  2.   Benito Carlos DIJO

    teie leht on natuke raske, kui teate palju programmeerimisest ja nendest asjadest, peaksite seda optimeerima ja mitte kasutama wordpress xc