30+ “Toiminto” -painikkeella ladattavat painikkeet
Ei ole juuri mitään verkkosivustoa, jossa ei ole kahdenlaisia painikkeita, nimittäin; sosiaalisen median painikkeet ja toimintapainikkeet. Vaikka entinen on täysin erilainen aihe, tässä postissa olen mukana Toiminto-painikkeen mallit ladattaviksi.
Koska web-suunnittelijat etsivät aina tuoretta keräämistä toimintopainikkeista, tässä on joukko toimintakohtaisia painikkeita, jotka vaihtelevat HTML, CSS ja JavaScript ammattimaisesti suunniteltuihin Photoshop-formaatteihin. Katsotaanpa.
Toimittajan huomautus: Tämä viesti julkaistiin alun perin elokuussa 2014 ja päivitettiin maaliskuussa 2018 Ashutosh KS: n uuden sisällön perusteella.
HTML / CSS / JS-painikkeet
Fancy Floaty -painike
Jos etsit hauskaa tapaa näyttää näyttökelpoisia kohteita, Fancy Floaty Button kuulostaa ihanalta valinnalta. Se näyttää yksinkertaisen värillinen painike, joka siirtyy hitaasti ylös ja alas. Voit myös muuttaa sen sisältöä ja muotoilua tarpeen mukaan.
RubyMotion CTA-painike
RubyMotion CTA -näppäin on kaunis ja houkutteleva toiminta-painike, sen värin ansiosta. minä pidän animaatio hover, joka täyttää koko painikkeen värillä.
Pulse CTA
Tämä malli näyttää yksinkertaisen toimintopainike, jossa on pulssi-tausta. Sen sykkivän luonteen ansiosta on havaittavissa, että jokainen kävijä kiinnittää huomiota.
Painike Flip-down Toimenpide
Painike Flip-down Soita toimintaan on yksinkertainen kutsupainike-malli, jossa on flip-animaatio, joka tuntuu postilaatikon avaamisesta. Tämän animaation vuoksi pidin tästä painikkeesta.
Kuusi nappia Hover-animaatioilla
Tämä kuuden joukko painikkeita, joissa on erilaisia hover-animaatioita on täydellinen joukko toimintopainikkeita, jos haluat sijoittaa eri painikkeita ja pitää ne kaikki ainutlaatuisina.
YouTube-soittopyyntö
Jos haluat näyttää videon tai promo-linkin toimintakutsuna, YouTube-soittopyyntö on ihanteellinen valinta. Se esittelee a Puhdas, näkyvä painike, joka näyttää ylimääräisiä tietoja hoveristä, ja voit muokata sen värejä, jotta se pysyisi mukana suunnittelussa.
Materiaalin suunnittelu animoituja painikkeita
Materiaalisen suunnittelun animaatiopainikkeet tuovat esiin materiaalin muotoilun yksinkertaisuuden toimintopainikkeessa. Se näyttää neljä painiketta, joissa on monipuolinen muotoilu ja aaltoileva vaikutus.
Micro-vuorovaikutuspainike
Kaunis ja vuorovaikutteinen toimintopainike-malli, Micro Interaction -näppäin näyttää puhtaan muotoilun näyttää painikkeen tekstin yhdessä kuvakkeen kanssa. Vaikka tämä malli näyttää hover-kuvakkeen, voit muokata sitä lisäämällä myös muita sisältöjä.
Vahvat CTA-painikkeiden animaatiot
Vahva CTA-painike-animaatio näyttää useita painikkeita eri väreissä. Pidin sen painikkeiden tavallisuudesta ja yksinkertainen muotoilu, jolla on siirtymävaikutus taustallaan väri-.
Mainost CTA
Suosikkikutsupainike, jota näet kaikkialla verkossa. Tämä CSS-pohjainen malli selittää myös perussuunnittelun tiedot luoda painike, joka muuntaa.
Soita toimintakokeeseen
Toimenpide-kokeilu on toinen vuorovaikutteinen painike, joka on määritetty kuten Micro Interaction Button. Se näyttää teksti normaalitilassa ja näyttää kuvakkeen hover-tilassa. Kuten toisen painikkeen tavoin, voit myös muokata sitä näyttämään minkä tahansa sisällön vuorovaikutuksen parantamiseksi.
Photoshop PSD: n painikkeet
Web 2.0 -painikkeet
Se on kaunis paketti useista kutsupainikkeista, mukaan lukien rekisteröidy, lataa, lue lisää painikkeita, jne. Se esittelee nämä painikkeet eri tyyleissä ja väreissä, joten voit valita painikkeen, joka parhaiten sopii tuotemerkkisi ja suunnittelusi suorituskykyyn.
CALL-TO-ACTION -painike
CALL-TO-ACTION -painike on yksinkertainen ja houkutteleva painike näyttökelpoisten kohteiden näyttämiseen. Se esittelee a pyöreä muotoilu, jossa on kaltevuus.
Soita toiminta-painikkeisiin
Sarja kolmivärisiä painikkeita, Call To Action -painikkeet esittävät latauspainikkeen kolme eri väriä ja kaksi tilaa - normaali ja painettu (Napsautetaan). Voit myös muokata painiketta näyttääksesi erillisen toiminnan samalla kun pidät painikkeen suunnittelun.
Iso vihreä painike (PSD)
Big Green Button esittelee a yksi, iso kutsumuksellinen painike joka sopii erinomaisesti laajennetun tiedon tai tekstin näyttämiseen yhdessä toimivan kohteen kanssa, esimerkiksi hinnoittelutiedot.
Ilmaiset puhelut toimintopainikkeille
Ilmaiset puhelut toimintopainikkeille esittävät a kirjautumispainike useita kokoja ja värejä. Vaikka niiden muotoilu on sama, niiden lajike auttaa valitsemaan parhaan tarpeen.
Web-suunnittelijan painike
Tämä toimintakutsupainike-malli näyttää useita painikkeita, jotka esittelevät pyöristetyt painikkeet, pyöreät reunat ja pienet ympyräpainikkeet. Tässä sarjassa voit myös huomata eri varjojen ja reunojen vaikutukset ja valita sopivan.
Soita toiminta-painikkeisiin
Toimintapuhelu Butttons on yksinkertainen malli, jossa on useita eri muotoja ja eri väreissä oleva gradientti. Asetus näkyy useita painikekokoja ja sisältää kuvakkeita myös tekstin cum-kuvakkeiden painikkeiden nykyinen suuntaus.
Soita toimintaan -painikkeella PSD
Toimenpide -painike PSD on malli, joka näyttää kaksi yhdistettyä painiketta painettavien ryhmäpainikkeiden luomiseksi. Malli sisältää tekstin cum-kuvakkeen painikkeessa ja esittelee pyöreällä reunalla ja kahdella tilalla tai tilalla asetetun painikkeen - normaali ja napsautettu.
Soita toimintopainikkeisiin PSD-tiedosto
Tämä painikemalli, kuten edellä, näyttää painikkeen, jossa on tekstiä, jossa on teksti cum-kuvake, kaltevuus tausta ja pyöristetty reunus normaaleissa ja hover-tiloissa.
Lataa + Lataa painikkeet PSD
Lataa + Lataa painikkeet PSD esittelee kolme sarjaa painikkeita kahdessa värissä ja mallissa. Vaikka malli näyttää lataus- ja latauspainikkeita, voit muokata sitä vastaamaan tarpeitasi. Lisäksi se näyttää painikkeet sisään hover ja ei hover valtiot.
CTA-painikkeet
CTA-painikkeet näyttävät kolme toimintopainiketta, joiden värit vaihtelevat. Painikkeet on määritelty, lihavoitu ja näyttää tyylin kahdessa eri tilassa - normaali ja hover.
Lue lisää painikkeita
Lue lisää -painikkeet esittelee a lisää painike on kolme eri tyylejä - normaali, hover ja aktiivinen / napsautettu. Nämä painikkeet sisältävät tekstiä (“Lisätietoja”) ja kuvake, mutta voit muuttaa niiden sisältöä tietysti brändin tai sivuston vaatimusten mukaan.
Vapaa painike
Free Button Set näyttää useita eri värejä - vaalea ja pimeä - painikkeita eri värimaailmien tai teemojen asentamiseksi. Tässä mallissa on viisi painiketta, joissa on monipuolisia malleja, jotka näkyvät kuvake, merkki ja teksti eri tyylillä, eri paikoissa.
3 “Kehotus toimintaan” painikkeet
Joukko täysin ainutlaatuinen “kehotus toimintaan” Kuldar Kalvikin suunnittelemat painikkeet.
3D-painikkeet
Kauniita 3D-painikkeita, jotka toimivat melko hyvin “kehotus toimintaan” painikkeet.
Lisää ostoskoriin painikkeet
Tämä joukko todennäköisesti ylittää useimpien premium-markkinoilla olevien kohteiden laadun, näyttää hyvin viehättävä ja ammattimainen.
Aqua Texture -painike
Korkea laatu ja tarpeeksi suuri, jotta voit vaatia toimintaa.
Kirkkaat 3D-painikkeet
Mukavasti suunnitellut 3D-painikkeet tasapainoinen typografia ja upea värimaailma.
“Kehotus toimintaan” nappi
Erittäin viileä ja tyylikäs “kehotus toimintaan” -painike, joka soveltuu erilaisiin malleihin.
Lataa painike
Joukko minimalistisia latauspainikkeita, jotka tulevat kolmeen eri tilaan - oletusarvo, siirrä ja napsautetaan.
Vihreä App Store -painike
Paras ilmainen sovellusmyymälä liittyy “kehotus toimintaan” painiketta olen nähnyt toistaiseksi.
Vaaleanpunainen vaalea “Kehotus toimintaan”
Vaaleanpunainen ja suunniteltu “kehotus toimintaan” joka todella houkuttelee sinua napsauttamalla sitä.
Punainen latauspainike
Melko ainutlaatuinen latauspainike sopii hyvin ohjelmistoihin tai web-sovelluksiin paikka.
Seksikäs vihreä latauspainike
Vihreä painike, joka houkuttelee sinua napsauttamaan sitä.
Web-painikkeet Vektorigrafiikka
Ammattimaisesti suunnitellut web-painikkeet erilaisiin käyttötarkoituksiin, jotka on luotu ammattikäyttöön tarkoitettujen DryIcons-tuotteiden avulla.
