41 mga libreng pindutan ng CSS na may isang maliit na JavaScript

Nagpapatuloy kami sa isa pang artikulo sa serye ng HTML, CSS at JavaScript nagdadala iyon a magandang listahan ng mga code upang bigyang-diin sa ang visual na hitsura o karanasan ng gumagamit ng aming website; maging isang eCommerce, isang Landing Page o isang blog mismo.

Hawakan ang sandali sa isa pa sa mga mahahalagang elemento na may kakayahang gawin ang call to action upang ang icon na magdadala sa gumagamit sa shopping cart, ang mga pindutan, ay maging mga pagbili. Ang mga pindutan ng CSS na mahahanap mo sa ibaba ay libre at binubuo ng mga pindutan ng 3D, para sa mga social network, upang ibahagi, upang bumalik sa simula o upang i-unlock pati na rin ang iba.

Pindutan ng 3D

Isang pindutang 3D na namumukod-tangi para sa lalim na dulot nito saan man tayo magpunta upang ilagay ito sa mga shading effects na magpapakitang-gilas sa bawat isa sa mga visual na elemento.

Pindutan ng 3D upang pindutin

Ito 3D na pindutan sa CSS ito ay may kakayahan na magsisimulang tumakbo ang animas habang pinahahaba natin ang pulsation nito.

Button sa likod

Dadalhin kami ng pindutan ng CSS na ito sa tuktok ng aming website kapag nakalusot na tayo dito.

Button ng bubble

Isang bubble button sa CSS at JavaScript na kapag na-click ay sumasabog sa isang serye ng mga bula na may kapansin-pansin at naaangkop na animasyon.

Magdagdag ng pindutan

isang kaaya-aya na animasyon nagbibigay buhay sa add button na ito sa CSS na maaaring maging isa sa mga elementong nagpapasikat sa aming website.

Button ng Offset ng CSS

Katulad ng naunang isa, bagaman na may isang maliit na iba't ibang mga animasyon. Maaari itong maging perpekto para sa isang serye ng mga website sa isang tukoy na tema.

Pagsasara ng pindutan

Pinindot namin ito pindutan sa CSS at HTML para sa isang pagsasara ng animasyon na gagawin. Simple, ngunit may mahusay na visual effects.

Pindutan ng isara ang CSS

Sa oras na iyon iwan natin ang mouse pointer Sa malapit na pindutan na ito, maaari naming malaman ang kalidad ng animasyon na isasama namin sa web.

Button sa pag-download ng CSS

Kung mayroon kaming nilalaman na mai-download sa aming website, mahalaga na magkaroon tayo ng angkop na pindutan para makarating ang gumagamit nang tama mabilis sa iyong pulso. Ang pindutan na ito ay nakatayo kapag pinindot at bumaba ng maraming maliliit na pagkabigla sa isang mahusay na naisakatuparan na animasyon.

Button sa pag-download

Dalubhasa ang pindutang ito sa animasyon para sa itaas ang isang maliit na bola lilipat iyon mula sa isang gilid ng bar patungo sa iba pa upang mai-highlight namin ang aksyon na gagawin ng gumagamit kapag nag-click sa pag-download.

Pag-download ng animasyon na pindutan

isang medyo mahaba ang animation para sa isang pindutan, ngunit maaaring iyon ang detalyeng nag-aalok ng propesyonalismo sa iyong website para sa mga pag-download ng lahat ng uri ng mga file.

Mag-hover button

Naghihintay para sa iyo ang pindutang ito iwanan ang mouse pointer sa itaas upang makita mo ang natitirang animasyon na nilikha nito

Pindutan ng ingay

Ang isa pang hover na pindutan na pinanindigan nakapagpapalakas na animasyon nangyayari iyon kapag lumilipad sa pointer.

Hover effect

Isa pang kagiliw-giliw na hover na epekto sa CSS na namumukod-tangi para rito mabilis at maliksi na animasyon na gumagawa ng magagandang sensasyon.

Naka-istilong hover effect

Isang pindutan ng pag-hover may mahusay na estilo sa animasyon para sa mga site na may isang klasikong ugnay.

Epekto ng gooey

Un simple at mausisa na epekto na nagdaragdag ng laki ng pindutan ng CSS na may kaunting HTML.

Stripe button

Kilala ang guhit dito mahusay na trabaho sa disenyo ng UI ng iyong website, ang pindutang Stripe na ito ay inspirasyon upang maaari mo itong dalhin sa iyong website.

Tatlong epekto sa pindutan ng CSS

Tatlong mga epekto sa CSS sa animasyon para sa pindutan at maaari naming isaalang-alang ang mahusay na estilo.

Tulad ng pindutan ng Twitter

Isang pindutan ng mga gusto para sa Twitter na may isang sparkling at masiglang animasyon. Perpekto para sa mga panahong ito ng social media.

Tulad ng pindutan ng animasyon

Dito ang magiging puso iyong mga tumatalon sa kagalakan kapag pinindot ang katulad na pindutan.

Splat tulad ng pindutan

Isa pa napaka-usyosong animation na may mahusay na epekto para sa isang katulad na pindutan para sa mga social network.

Button sa pag-play

I-play ang pindutan na magsisimula tumalon, para rin sa kagalakan, kapag pinindot.

Button sa Playback CSS

Ang isang animasyon ay buburahin ang paligid na pumapalibot sa icon Pag-playback ng pindutan ng CSS na ito.

I-pause / pindutan ng pag-play

Isang pindutan lamang i-pause / maglaro nang may kaunting ugnayan Sa disenyo.

Retro simpleng pindutan

Parang pinipindot namin ang mga pindutan sa isang game controller mula sa isang console tulad ng XboX.

Butones ng bahaghari

Isang pindutan na may a animasyon ng bahaghari na muling likha ang mga notification na dumating sa Galaxy S8.

Button sa lipunan

Isang drawer na bubukas sa tanyag na mga icon ng social media sa pamamagitan ng lahat sa pamamagitan ng pag-iiwan ng mouse pointer dito.

Lumulutang na animasyon

Isang pindutan na may a kalidad ng animasyon na-trigger ang oras na mag-click dito.

Mga 3D social icon

Un epekto na nakakaakit ng pansin at nangyayari iyon kapag iniiwan natin ang pointer na nagpapahinga.

Mga pindutang panlipunan

Mga ito ang mga social button ay gumagamit ng isang animasyon Binabago nito ang kulay mula sa itaas upang makilala ang sarili nito mula sa iba pa.

Cubic mga social button

Ang mga pindutan na ito ay na matatagpuan sa isang kubo perpektong gumagalaw iyon kapag naiwan natin ang pointer dito.

Magbahagi ng mga pindutan

Un pindutan ng ibahagi nakikilala sa pamamagitan ng isang walang katapusang cyclical na animasyon.

Button ng pagbabahagi ng social media sa SVG

Pindutin lamang ang pindutan ng pagbabahagi at mahahanap mo ang banal na epekto na nangyayari sa pindutang social media na ito.

Button ng pagbabahagi ng gooey

Kasama ng iba animation «Gooey», ang pindutang ito ay kapansin-pansin para sa epekto na ginagawa nito.

magbahagi

Ito ang pindutan ay nahahati sa apat na magkakaiba upang mapili mo ang social network kung saan mo mai-publish ang direktang ibinahaging nilalaman.

Button ng mga review ng star

Isang pindutan mag-hover na nangongolekta ng iskor na ibibigay mo kapag iniwan mo ang itinuro ng pointer.

Button ng Marka ng SVG

Isa pang hover button para sa puntos na may marka isang produkto o kung ano pa man.

Button ng pagsingil

Sa pamamagitan ng pagpindot sa ang button ng pag-upload ay magsisimulang proseso ng pag-download o kung ano ang pinakamahusay na gumagana para sa iyong website.

Tanggapin ang pindutan

Mag-click dito at isang form ang tatanggapin o anumang iba pang pagkilos na nangangailangan ng pag-apruba mula sa gumagamit ng aming website.

Mag-swipe button

Nakatuon para sa mobile, ang pindutan na ito ay kailangang pindutin upang madala sa gilid na may kilos na napaka-pangkaraniwan sa mga smartphone.

I-unlock ang kilos

Un kilos ng kilos gamit ang daliri o pointer at bubuksan namin ang terminal mismo. Isa pang perpektong pindutan para sa mobile.