41 bezmaksas CSS poga ar nelielu JavaScript

Mēs turpinām ar citu rakstu sērijā HTML, CSS un JavaScript kas nes jauks kodu saraksts, ar kuriem uzsvērt mūsu vietnes vizuālais izskats vai lietotāja pieredze; vai tā būtu e-komercija, galvenā lapa vai pats emuārs.

Tas pieskaras brīdim citam no tiem svarīgajiem elementiem, kas spēj veikt aicinājumu uz darbību lai ikona, kas lietotāju novedīs pie iepirkumu groza, pogas, kļūs par pirkumiem. CSS pogas, kuras atradīsit zemāk, ir bezmaksas un sastāv no 3D pogām, kas paredzētas sociālajiem tīkliem, lai tās varētu koplietot, atgriezties sākumā vai pat atbloķēt, kā arī citas.

3D poga

3D poga, kas izceļas dziļumam, ko tas rada lai kur mēs dotos, lai to novietotu ar tiem ēnojuma efektiem, kas izceļ katru no vizuālajiem elementiem.

3D poga, lai nospiestu

šis 3D poga CSS Tam piemīt spēja, ka animācija sāks darboties, kad mēs pagarināsim tās pulsāciju.

Poga Atpakaļ

Šī CSS poga mūs aizvedīs mūsu vietnes augšdaļā kad mēs esam tam pārvietojušies.

Burbuļa poga

Burbuļa poga CSS un JavaScript, uz kuras noklikšķinot šļakstīsies ar burbuļu sēriju ar uzkrītošu un piemērotu animāciju.

Pievienot pogu

A gracioza animācija piešķir dzīvību šai CSS pievienošanas pogai, kas var būt viens no tiem elementiem, kas izceļ mūsu vietni.

CSS kompensācijas poga

Kaut arī līdzīgs iepriekšējam ar nedaudz atšķirīgu animāciju. Tas var būt ideāls vietņu sērijām par noteiktu tēmu.

Pogas aizvēršana

Mēs to nospiežam poga CSS un HTML lai izveidotu noslēdzošo animāciju. Vienkārši, bet ar lielisku vizuālo efektu.

CSS aizvēršanas poga

Tajā laikā, ka atstāsim peles rādītāju Izmantojot šo aizvēršanas pogu, mēs varēsim uzzināt kvalitatīvu animāciju, kuru integrēsim tīmeklī.

CSS lejupielādes poga

Ja mūsu vietnē ir lejupielādējams saturs, tas ir svarīgi mums ir piemērota poga, lai lietotājs varētu pareizi rīkoties ātri uz pulsa. Šī poga izceļas, kad tiek nospiesta, un labi izpildītā animācijā nomet daudz mazu triecienu.

Lejupielādes poga

Šī poga specializējas animācijā paceliet nelielu bumbu kas pārvietosies no vienas joslas puses uz otru, lai liktu mums izcelt darbību, ko lietotājs veic, noklikšķinot uz lejupielādes.

Lejupielādes pogas animācija

A diezgan ilga animācija pogai, taču tā var būt tā detaļa, kas piedāvā profesionalitāti jūsu vietnei, lai lejupielādētu visu veidu failus.

Poga Hover

Šī poga jūs gaida atstājiet peles rādītāju iepriekš, lai jūs varētu redzēt izcilo animāciju, ko tā rada.

Trokšņa poga

Vēl viena hover poga, kas izceļas elektrificējoša animācija kas notiek, virzot kursoru virs rādītāja.

Lidojuma efekts

Vēl viens interesants CSS kursora efekts, kas izceļas ar to ātra un veikla animācija kas rada labas sajūtas.

Stilīgs lidināšanās efekts

Vienu pogu kursors ar lielisku stilu animācijā vietnēm ar klasisku pieskārienu.

Gooey efekts

Un vienkāršs un ziņkārīgs efekts kas palielina CSS pogas lielumu ar nedaudz HTML.

Svītra poga

Svītra ir pazīstama ar to lielisks darbs pie jūsu vietnes lietotāja saskarnes dizaina, šī poga Stripe ir iedvesmota, lai jūs varētu to aiznest uz savu vietni.

Trīs CSS pogu efekti

Trīs CSS efekti pogas animācijā un ka mēs varam uzskatīt par lielisku stilu.

Tāpat kā poga Twitter

Poga patīk atzīmēt ar Twitter ar dzirkstošu un enerģisku animāciju. Ideāli piemērots šīm sociālo mediju dienām.

Tāpat kā animācijas poga

Šeit būs sirdis tie, kas lec no prieka, kad tiek nospiesta līdzīgā poga.

Splat patīk poga

Cits ļoti ziņkārīga animācija ar lielisku efektu par līdzīgu pogu sociālajiem tīkliem.

Atskaņošanas poga

Sāksies poga Atskaņot lēkt, arī prieka pēc, nospiežot.

Atskaņošanas poga CSS

Animācija izdzēsīs apkārtmērs ap ikonu Šīs CSS pogas atskaņošana.

Pauze / atskaņošanas poga

Tikai poga pauze / spēle ar minimālu pieskārienu Projektā.

Retro vienkārša poga

It kā mēs būtu nospieduši pogas uz spēles kontroliera no tādas konsoles kā XboX.

Varavīksnes poga

Poga ar a varavīksnes animācija kas atjauno paziņojumus, kas tiek piegādāti Galaxy S8.

Sociālā poga

Atvilktne, kas atveras ar populāru sociālo mediju ikonas visu atstājot peles rādītāju virs tā.

Peldoša animācija

Poga ar a kvalitatīva animācija tas tiek aktivizēts brīdī, kad mēs uz tā noklikšķinām.

3D sociālās ikonas

Un uzmanības piesaistīšanas efekts un tas notiek, kad mēs atstājam rādītāju pozētu.

Sociālās pogas

Šis sociālajās pogās tiek izmantota animācija Tas maina krāsu no augšas, lai atšķirtu sevi no pārējās.

Kubiskās sociālās pogas

Šīs pogas ir atrodas kubā kas lieliski pārvietojas, kad atstājam rādītāju uz tā.

Kopīgošanas pogas

Un kopīgošanas poga izceļas ar bezgalīgu ciklisku animāciju.

Sociālo mediju kopīgošanas poga SVG

Vienkārši nospiediet pogu kopīgot un jūs atradīsit dievišķo efektu kas notiek šajā sociālo mediju pogā.

Gooey poga

Ar citiem animācija «Gooey», šī poga ir ļoti pārsteidzoša attiecībā uz tās radīto efektu.

akcija

šis poga ir sadalīta četrās dažādās lai jūs varētu izvēlēties sociālo tīklu, kurā publicēsit tieši kopīgoto saturu.

Zvaigžņu atsauksmju poga

Poga virziet kursoru, kas savāc rezultātu ko jūs gatavojaties dot, atstājot pozēto rādītāju.

SVG rezultātu poga

Vēl viena peles kursora poga punktu skaits ar atzīmi produkts vai kas cits.

Uzlādes poga

Nospiežot augšupielādes poga sāks lejupielādes procesu vai kas vislabāk darbojas jūsu vietnē.

Poga Akceptēt

Nospiediet un veidlapa tiks pieņemta vai jebkura cita darbība kas jāapstiprina no mūsu vietnes lietotāja.

Velciet pogu

Veltīts mobilajām ierīcēm, šī poga ir jānospiež, lai to novestu pie sāniem ar šo viedtālruņiem tik raksturīgo žestu.

Atbloķējiet žestu

Un sānu žests ar pirkstu vai rādītāju un mēs atbloķēsim pašu termināli. Vēl viena ideāla poga mobilajām ierīcēm.