9 butoane personalizate de partajare socială CSS și JavaScript

Fiecare site ar trebui să includă câteva butoane sociale pentru a crește distribuirea pe web. Dar butoanele implicite de partajare nu sunt atât de grozave și fiecare sunt stilate diferit, în funcție de marca rețelelor.

De aceea, am organizat această mică colecție de butoane personalizate de partajare pe care le puteți formata și reutiliza pe propriul dvs. site. Dacă sunteți în căutarea unor butoane frumoase de partajare, aceste șabloane oferă un punct de plecare excelent.

1. Partajare laterală

Prima este una dintre tehnicile mele preferate create de dezvoltatorul Michael Schofield. Această interfață de utilizare a insignei sociale cu partajare laterală fixă ​​este foarte comună pe blogurile mari și site-urile de reviste.

Aceste insigne sociale pot fie să rămână poziționate în partea de sus, lângă titlu, fie pot derula în jos cu utilizatorul. Nu am găsit niciun studiu de caz care să compare diferențele, dar mi-aș imagina că butoanele fixe văd un număr mai mare de cote. Și, în orice caz, sunt atât de bine proiectate încât nu par să fie spam sau încălțați în aspect.

Acesta este probabil cel mai bun șablon cu care începeți dacă aveți un blog și doriți niște insigne de partajare personalizate.

2. Butoane de imagine

Un alt stil de partajare popular este repostarea imaginilor găsite pe un site web. Acest lucru este popular cu Pinterest, dar poate funcționa bine pentru Facebook și Twitter și chiar și pentru Google+.

Aceste butoane de imagine sunt modele personalizate folosind CSS3 pur și câteva logo-uri de fundal pentru fiecare. Nu se conectează încă la nicio rețea socială, dar linkurile de ancorare pot fi programate cu ușurință pentru partajare socială.

Designul este într-adevăr concentrarea mea aici, deoarece arată fenomenal atașat la orice imagine. În plus, locația chiar dezvăluie ideea că încerci să încurajezi distribuirea imaginii în sine, nu doar a postării.

3. Comutați Partajări

Cu toții am văzut acele widget-uri de partajare WordPress folosind pictograma mică de partajare și meniul derulant. După un timp pot deveni învechite, așa că ajută să le amesteci puțin.

Cu acest fragment, vă puteți modifica partajarea socială cu o animație personalizată și un meniu ascuns. Este perfect pentru oricine are un site care dorește să încurajeze o mulțime de partajare în mai multe rețele.

Fiecare pictogramă a fost proiectată în CSS pur, iar animația este controlată prin jQuery. Ar trebui să puteți doar să copiați/lipiți acest lucru în orice aspect și să îl faceți să funcționeze. S-ar potrivi bine chiar lângă titlul unui articol sau chiar în partea de jos după ce oamenii termină de citit. În orice caz, este sigur că va crește cotele sociale la nivel general.

4. Animații în cerc

Pentru un pic de animație distractivă, verifică aceste butoane circulare create de Stephane Lyver.

Fiecare buton are propriul efect de trecere cu mouse-ul pentru a-anima și toate se pot îmbina perfect în orice aspect. Puteți chiar să schimbați culorile de fundal și pictograme, astfel încât acestea să iasă în evidență pe un fundal alb simplu.

Totul rulează pe CSS pur și pictogramele sunt extrase din Font Awesome prin Bootstrap.

Rețineți că aceste butoane nu se conectează direct la linkurile de partajare socială, dar acest lucru poate fi rezolvat cu ușurință cu codul potrivit.

5. Butoane simple de partajare

Scurt, dulce și la obiect descrie cel mai bine aceste butoane de partajare.

Folosesc pictograme SVG simple din setul de pictograme Ionicons. Dar nu aveți nevoie de Ionic sau orice JavaScript pentru a le face să funcționeze.

În schimb, folosesc valoarea href împreună cu noi opțiuni de filă pentru a deschide linkurile de partajare chiar în browser. Nu este necesar JavaScript, nu sunt necesare SVG-uri neplăcute.

Dacă săpați în setul de pictograme Ionic, puteți găsi chiar și alte pictograme sociale pe care ați dori să le adăugați. În plus, aveți control deplin asupra stilurilor în CSS, astfel încât să puteți schimba dimensiunea, umplutura, culoarea fontului și aproape orice altceva.

6. Sociale ascunse

Dezvoltatorul Chris Sevilleja a creat aceste butoane sociale ascunse, toate cu CSS pur.

Unele site-uri web folosesc această tehnică pentru a încorpora insigne de partajare implicite în pictograme mai mici. Dar, desigur, aceasta este o animație unică, așa că nu este o tendință foarte comună.

Codul este foarte ușor de configurat și totul rulează prin CSS, astfel încât să aveți control deplin. Chris a dezvoltat chiar și un stilou similar pentru insignele sociale Google+.

Ambele fragmente de cod sunt fanastice pentru aproape orice site web, iar animațiile rulează în toate browserele compatibile cu CSS3.

7. Treceți cu mouse-ul pe Culori de fundal

Acum, iată o configurație unică de partajare socială, în care culoarea de fundal se schimbă în funcție de butonul pe care îl plasați.

Fiecare buton are propria pictogramă personalizată extrasă din Font Awesome, astfel încât să puteți chiar extinde acest set pentru a include alte pictograme asociate. De asemenea, îmi place foarte mult această abordare, deoarece are funcția de rezervă JavaScript pentru modificările hover.

Dar dezvoltatorul web Christopher Grabinski a creat o alternativă CSS pură care funcționează exact la fel (în browserele acceptate).

Nu cred că această tehnică ar arăta grozav pe un blog mai mare, deși poate funcționa pe site-uri mai mici sau pe postări scurte de blog.

8. Partajare volantă

Dezvoltatorul Kyle Lavery a creat un buton uimitor de distribuire a flyout-ului, care amintește de abordarea Google a materialelor derulante.

Acest lucru folosește puțin JavaScript, dar are doar 5 linii și nu este foarte complex. Magia animației este în CSS pe care îl puteți personaliza pentru a se potrivi nevoilor dvs.

Ceea ce este, de asemenea, interesant este că HTML brut este nebun de simplu. Are un container principal de partajare și apoi folosește elemente div pentru butoane. Practic, 5 linii de HTML și 5 linii de JavaScript, amestecate cu o mulțime de CSS, vă oferă acest efect minunat.

Absolut una dintre cele mai tari caracteristici de partajare socială pe care le-am văzut, iar stilul de design al materialului îl face și mai cool.

9. Butoane de partajare 3D

Ultimul din colecția mea este acest design 3D care utilizează transformări CSS 3D alături de butoanele sociale.

Dezvoltatorul Fabrizio Bianchi a creat aceste butoane folosind CSS pur de la pictograme la animațiile de transformare. Pictogramele principale sunt de la Font Awesome și singurul cod JS este pentru încorporarea butoanelor în interior.

Dar, în general, aceasta este o soluție CSS pură, care ar trebui să funcționeze bine pe orice site. Nu tuturor le place efectul 3D, dar dacă se potrivește cu designul dvs., atunci mergeți la el.