9 Tombol Berbagi Sosial CSS & JavaScript Kustom

Setiap situs harus menyertakan beberapa tombol sosial untuk meningkatkan berbagi di web. Tetapi tombol berbagi default tidak terlalu bagus dan masing-masing ditata berbeda berdasarkan merek jaringan.

Itulah mengapa kami mengumpulkan kumpulan kecil tombol berbagi khusus ini yang dapat Anda format dan gunakan kembali di situs Anda sendiri. Jika Anda mencari tombol berbagi yang indah, template ini menawarkan titik awal yang bagus.

1. Berbagi Sisi

Yang pertama adalah salah satu teknik favorit saya yang dibuat oleh pengembang Michael Schofield. UI lencana sosial berbagi sisi tetap ini sangat umum di blog besar dan situs majalah.

Lencana sosial ini dapat tetap diposisikan di bagian paling atas di dekat judul atau dapat digulir ke bawah bersama pengguna. Saya belum menemukan studi kasus yang membandingkan perbedaan, tetapi saya membayangkan tombol tetap memang melihat jumlah share yang lebih tinggi. Dan bagaimanapun mereka dirancang dengan sangat baik sehingga tidak terlihat seperti spam atau tidak sesuai dengan tata letak.

Ini mungkin template terbaik untuk memulai jika Anda menjalankan blog dan menginginkan beberapa lencana berbagi khusus.

2. Tombol Gambar

Gaya berbagi populer lainnya adalah memposting ulang gambar yang ditemukan di situs web. Ini populer dengan Pinterest tetapi dapat bekerja dengan baik untuk Facebook dan Twitter, dan bahkan Google+ juga.

Tombol gambar ini adalah desain khusus menggunakan CSS3 murni dan beberapa logo latar belakang untuk masing-masing tombol. Mereka belum terhubung ke jejaring sosial apa pun, tetapi tautan jangkar dapat dengan mudah diprogram untuk berbagi sosial.

Desainnya benar-benar fokus saya di sini karena terlihat fenomenal melekat pada gambar apa pun. Plus, lokasi benar-benar memberikan gagasan bahwa Anda mencoba mendorong pembagian gambar itu sendiri, bukan hanya pos.

3. Beralih Berbagi

Kita semua pernah melihat widget berbagi WordPress menggunakan ikon berbagi kecil dan menu flyout. Setelah beberapa saat mereka bisa menjadi basi, jadi akan membantu untuk mencampurnya sedikit.

Dengan cuplikan ini Anda dapat menata ulang berbagi sosial Anda dengan animasi khusus dan menu tersembunyi. Ini sempurna untuk siapa saja dengan situs yang ingin mendorong banyak berbagi di beberapa jaringan.

Setiap ikon telah dirancang dalam CSS murni dan animasi dikontrol melalui jQuery. Anda seharusnya bisa menyalin/menempel ini ke tata letak apa pun dan membuatnya berfungsi. Itu akan pas di samping judul artikel, atau bahkan di bagian bawah setelah orang selesai membaca. Either way itu pasti untuk meningkatkan saham sosial di seluruh papan.

4. Animasi Lingkaran

Untuk sedikit animasi yang menyenangkan, lihat tombol lingkaran ini yang dibuat oleh Stephane Lyver.

Setiap tombol memiliki efek hover-to-animate sendiri dan semuanya dapat menyatu dengan sempurna ke dalam tata letak apa pun. Anda bahkan dapat mengubah warna latar belakang dan ikon sehingga menonjol dengan latar belakang putih polos.

Semuanya berjalan pada CSS murni dan ikon ditarik dari Font Awesome melalui Bootstrap.

Perhatikan bahwa tombol-tombol ini juga tidak terhubung langsung ke tautan berbagi sosial tetapi ini dapat diperbaiki dengan mudah dengan kode yang tepat.

5. Tombol Berbagi Sederhana

Singkat, manis, dan to the point paling tepat menggambarkan tombol berbagi ini.

Mereka menggunakan ikon SVG sederhana dari set ikon Ionicons. Tetapi Anda tidak perlu Ionic atau JavaScript apa pun untuk membuatnya berfungsi.

Sebagai gantinya mereka menggunakan nilai href bersama dengan opsi tab baru untuk membuka tautan berbagi langsung di browser. Tidak perlu JavaScript, tidak perlu SVG yang kikuk.

Jika Anda menggali ke dalam kumpulan ikon Ionic, Anda bahkan dapat menemukan ikon sosial lain yang mungkin ingin Anda tambahkan. Selain itu, Anda memiliki kontrol penuh atas gaya dalam CSS sehingga Anda dapat mengubah ukuran, padding, warna font, dan hampir semua hal lainnya.

6. Sosial Tersembunyi

Pengembang Chris Sevilleja membuat tombol sosial tersembunyi ini semua dengan CSS murni.

Beberapa situs web menggunakan teknik ini untuk menyematkan lencana berbagi default di dalam ikon yang lebih kecil. Tapi harus diakui ini adalah animasi yang unik sehingga bukan tren yang super umum.

Kode ini sangat mudah diatur dan semuanya berjalan melalui CSS sehingga Anda memiliki kontrol penuh. Chris bahkan mengembangkan pena serupa untuk lencana sosial Google+.

Kedua cuplikan kode sangat fanatik untuk hampir semua situs web dan animasi berjalan di semua browser yang sesuai dengan CSS3.

7. Arahkan Warna Latar Belakang

Sekarang inilah pengaturan berbagi sosial yang sangat unik di mana warna latar belakang berubah berdasarkan tombol mana yang Anda arahkan.

Setiap tombol memiliki ikon kustomnya sendiri yang diambil dari Font Awesome sehingga Anda bahkan dapat memperluas set ini untuk menyertakan ikon terkait lainnya. Saya juga sangat menyukai pendekatan ini karena memiliki JavaScript fallback untuk perubahan hover.

Tetapi pengembang web Christopher Grabinski menciptakan alternatif CSS murni yang bekerja persis sama (di browser yang didukung).

Saya tidak berpikir teknik ini akan terlihat bagus di blog yang lebih besar, meskipun mungkin berhasil di situs yang lebih kecil atau posting blog pendek.

8. Berbagi Flyout

Pengembang Kyle Lavery membuat tombol berbagi flyout luar biasa yang mengingatkan pada pendekatan Google terhadap flyout material.

Ini memang menggunakan sedikit JavaScript tetapi hanya 5 baris dan tidak terlalu rumit. Keajaiban animasi ada di CSS yang dapat Anda sesuaikan dengan kebutuhan Anda.

Yang juga menarik adalah HTML mentahnya sangat sederhana. Ini memiliki satu wadah berbagi utama dan kemudian menggunakan elemen div untuk tombol. Pada dasarnya 5 baris HTML dan 5 baris JavaScript, dicampur dengan sejumlah besar CSS, memberi Anda efek yang indah ini.

Benar-benar salah satu fitur berbagi sosial paling keren yang pernah saya lihat dan gaya desain material membuatnya semakin keren.

9. Tombol Berbagi 3D

Terakhir dalam koleksi saya adalah desain 3D ini menggunakan transformasi 3D CSS di samping tombol sosial.

Pengembang Fabrizio Bianchi membuat tombol-tombol ini menggunakan CSS murni dari ikon hingga animasi transformasi. Ikon utama berasal dari Font Awesome dan satu-satunya kode JS adalah untuk menyematkan tombol di dalamnya.

Tapi secara keseluruhan ini adalah solusi CSS murni yang harus bekerja dengan baik di situs mana pun. Tidak semua orang menyukai efek 3D tetapi jika itu sesuai dengan desain Anda, lakukanlah.