20 Tombol Media Sosial HTML5 & Bootstrap 2022
Diterbitkan: 2022-07-15Buka potensi jejaring sosial dengan menggunakan templat tombol sosial terbaik (dan paling keren) ini – gratis.
Kami meninjau banyak tombol dan ikon yang tersedia di web tetapi memilih 21 ini.
Anda dapat dengan mudah menemukan gaya yang tepat karena keragaman koleksi ini.
Itu tidak berakhir di sini.
Jika mau, Anda juga bisa mempercantik dan memberi merek sesuai dengan bisnis dan website Anda.
Efek dari berbagi sosial dapat membawa hasil yang sangat positif . Kami telah melihatnya sendiri bahkan di ceruk yang mungkin tidak terlalu populer di Facebook, Instagram, dll.
Anda dapat menggunakan tombol sosial Bootstrap ini untuk membagikan SEMUA yang Anda inginkan.
Bersosialisasi!
Tombol Bootstrap V15
Kami memiliki banyak variasi tombol yang berbeda untuk Anda tetapi memutuskan untuk menyertakan hanya yang paling menguntungkan Anda. Selain itu, Anda akan melihat bahwa kit menyertakan banyak tombol, bukan hanya tombol media sosial.
Anda MENANG waktu besar.
Bootstrap Buttons V15 mungkin adalah set favorit saya dari daftar. Tombol sosial hadir dalam dua format berbeda dengan efek bayangan keren, yang menghilang saat melayang.
Tombol Bootstrap V18
Bootstrap Buttons V18 adalah kumpulan tombol yang berbeda yang sangat BERBEDA dari yang lain. Namun, Anda juga mendapatkan beberapa yang lebih tradisional, sehingga Anda dapat memilih jalur mana pun yang Anda inginkan.
Bahkan jika Anda tidak menyadarinya pada tampilan pertama, setiap tombol juga menyertakan bayangan yang menciptakan efek klik yang keren (dengan menghilang).
Anda dapat mencobanya sendiri dengan mengunjungi halaman pratinjau demo langsung.
Tombol Bootstrap V13
Meskipun Bootstrap Buttons V13 berada di latar belakang gelap , Anda dapat menggunakannya dengan gaya latar belakang lainnya. Anda tidak harus selalu mengikuti konfigurasi default.
Merasa GRATIS untuk melawan arus.
Di sini Anda mendapatkan beberapa gaya tombol media sosial yang berbeda, sehingga Anda pasti akan menemukan desain yang paling cocok untuk Anda . Setengahnya datang dengan warna solid dan setengahnya lagi hanya dengan garis luar.
Tombol Bootstrap V01
Kumpulan tombol sosial HTML sederhana dan serbaguna yang dapat Anda integrasikan dengan cepat ke situs web atau blog apa pun. Mereka mengikuti branding setiap platform sosial, jadi Anda dipersilakan untuk mempekerjakan mereka apa adanya.
Selain variasi dengan struktur warna solid, ada juga yang hanya memiliki garis luar.
Selain itu, kedua versi hadir dengan efek KLIK yang bekerja dengan menghilangkan bayangan.
Animasi Tombol Sosial Datar Mewah oleh Colorlib
Colorlib membawa animasi CSS3 keren ke level berikutnya dengan set ikon sosial Fancy Flat Animated miliknya. Kami memiliki ikon jejaring sosial LinkedIn, Twitter, Instagram, Youtube, Github, dan Facebook terkemuka yang terintegrasi dengan latar belakang persegi sederhana .
Banyak ikon lain juga tersedia berkat perpustakaan Font Awesome yang tersedia untuk Anda gunakan.
Saat mengarahkan/mengklik di atas masing-masing ikon, ANIMASI tertentu memicu yang mengubah ikon menjadi lingkaran, bukan kotak default. Itu bisa menjadi tambahan yang keren untuk situs web yang sudah dinamis dan interaktif.
Tombol sosial dianimasikan dengan Sass
Selanjutnya kita memiliki set ikon sosial animasi SASS dari Colorlib yang menampilkan tooltips khusus untuk setiap ikon.
Misalnya, setiap kali seseorang mengarahkan kursor ke salah satu ikon, mereka akan langsung menerima tooltip pemberitahuan yang mengatakan tentang ikon ini, Anda dapat sepenuhnya menyesuaikannya untuk mencerminkan ide dan pesan Anda, atau membiarkannya sebagai default yang menentukan jaringan sosial.
Ikon juga tersedia untuk GitHub, Email, Facebook, LinkedIn, Twitter, Instagram, Youtube, dan jejaring sosial lainnya berdasarkan Font Awesome .
Selain itu, skema warna default adalah latar belakang abu-abu dengan teks ikon putih.
Font Tombol Sosial Luar Biasa Didukung oleh Bootstrap
Terakhir, kami memiliki kombinasi dua kerangka kerja yang sangat populer di web — Bootstrap dan Font Awesome.
Bayangkan jika keduanya memiliki bayi, apa yang akan Anda dapatkan dari set ikon yang luar biasa ini tidak lain dari Stan Williams. Ikon-ikon ini akan membentang sejauh GitHub, Apple, Android, Skype dan Stack Overflow dan seluruh perpustakaan Font Awesome dari ratusan ikon.
Ini adalah set untuk mendapatkan jika Anda membutuhkan warna dan pernyataan KETAT untuk kebutuhan sosial Anda.
Tombol Sosial CSS/HTML Minimal oleh Colorlib
Berikut adalah beberapa ikon sosial yang rapi dari Colorlib. Set ini menampilkan set ikon warna abu-abu untuk Facebook, Twitter, Instagram, Youtube, Behance, dan ratusan lainnya.
Colorlib telah menambahkan batas yang mudah dihapus yang membuat ikon terlihat lebih ringkas dan akan lebih mudah diintegrasikan ke dalam desain.
Namun, Anda selalu dapat menghilangkan batas dan menggunakan ikon yang Anda suka. Misalnya, di menu navigasi footer atau header atau di dalam area konten Anda.
Tombol Sosial Dengan Geser Hover
Sangat menyenangkan melihat evolusi web dan khususnya aspek desain bahasa seperti CSS3 dan HTML5. Berikut adalah kumpulan ikon cantik dan modern yang berasal dari Colorlib.
Set ini menampilkan empat jejaring sosial utama (LinkedIn, Twitter, dan Facebook) dalam pengaturan warna yang indah dan kotak tata letak kotak untuk menyimpan ikon di dalamnya.
Efek hover dibuat untuk membantu Anda menutupi widget berbagi jejaring sosial default dengan ikon sosial yang lebih menarik.
Saat mengarahkan kursor ke ikon VERSI ANDA, pengguna akan dapat melihat tombol Suka, Bagikan, dan Tweet langsung dengan jumlah berbagi nyata!
Bagikan Tombol Sosial
Colorlib membagikan kumpulan tombol berbagi sosial yang sangat ringan yang menggunakan HTML5 untuk menyediakan fitur yang sangat rapi.
Anda mendapatkan widget 'ikon berbagi' sederhana untuk ditambahkan ke situs Anda, tetapi setelah mengklik widget, banyak situs jejaring sosial EXPANDS dapat digunakan untuk berbagi konten atau mempromosikan profil media sosial Anda sendiri.
Dalam mode Colorlib biasa, ikon-ikon ini hadir dengan perpustakaan Font Awesome lengkap dengan semua 100-an ikonnya.
Tombol Sosial Bergaya
Chris Deacy membawa kita satu set ikon sosial bergaya yang akan memberikan efek latar belakang melayang untuk interaktivitas MAKSIMUM antara ikon dan pengguna.
Setiap set ikon sosial menyediakan banyak ikon khusus jejaring sosial, dan di sini, kami menemukan Twitter, Facebook, Skype, dan Dribble.
Setiap kali Anda mengarahkan kursor ke salah satu ikon, latar belakang ikon akan diisi dengan warna paling dominan dari setiap jejaring sosial.
Fitur yang cukup keren yang tidak akan luput dari perhatian!
Tombol Sosial hanya menggunakan HTML
Kumpulan ikon sosial khusus HTML dari OstrIO adalah solusi sempurna untuk webmaster, desainer, dan pengembang yang membutuhkan solusi berbagi media sosial yang ringan untuk situs web minimalis mereka.
Kami juga setuju bahwa ikon ini akan MENGUNTUNGKAN proyek skala apa pun, jadi jangan biarkan diri Anda dibatasi oleh konsep HTML saja.
Selain itu, set ini memiliki empat set ukuran yang berbeda, membuatnya sangat mudah untuk diintegrasikan di situs web dari semua ukuran dan bentuk.
Ketersediaan ikon media sosial berkisar dari Pinterest hingga VKontakte, hingga Facebook dan Twitter, dan LAINNYA.
Tombol Media Sosial Animasi
Tombol media sosial ini memiliki animasi yang rapi , tetapi juga hadir dengan efek gradien yang keren. Setelah berada di situs web atau blog Anda, semua pengunjung Anda pasti akan melihatnya.
Dan begitu mereka melayang di atas mereka, kegembiraan akan menembus atap.
Mengapa? Karena saya memberi tahu Anda satu hal – mereka tidak mengharapkannya!
Meskipun Anda ingin kehadiran online Anda rapi, Anda selalu dapat MEMPERKAYA hal-hal dengan detail kecil, seperti ikon media sosial.
Mereka tidak akan terlalu mengacaukan halaman Anda dengan drama apa pun, melainkan meningkatkan pengalaman.
Ikon Sosial Animasi
Lebih banyak ikon media sosial animasi datang kepada Anda. Koleksi khusus ini memberikan efek yang sama untuk semua ikon, baik Facebook atau Twitter, Pinterest atau YouTube.
Saat Anda mengarahkan kursor mouse ke atasnya, mereka beredar . Template ini akan melakukan trik untuk sesuatu yang lebih DASAR.
Biarkan website, blog, atau toko online Anda memiliki ikon media sosial yang tidak membosankan.
Ini bahkan tidak dikenakan biaya sepeser pun, jadi dapatkan tangan Anda dan uji hal-hal di halaman Anda untuk melihat seberapa baik mereka menghiasinya. Sedikit kerja untuk hasil yang luar biasa.
Tombol dan ikon sosial CSS
Kami akui, banyak set ikon di daftar kami yang benar-benar menakjubkan dan akan memberikan pengalaman berbagi sosial yang luar biasa kepada jutaan pengguna web.
Kumpulan besar tombol dan ikon sosial CSS3 ini akan merevolusi cara Anda menampilkan informasi media sosial di situs web, aplikasi, proyek, blog, dan sebagainya.
Dari tombol Evernote sederhana, hingga tombol TEKNIS lainnya seperti "Baca Selengkapnya di Majalah Smashing", atau "Tersedia di App Store" dan semacamnya.
Ikon semacam ini akan menambahkan karakter ke konten Anda. Ini juga akan meningkatkan peluang Anda untuk mendapatkan saham sosial, dan penjualan
Tombol Sosial Melingkar
Ikon persegi sangat dominan di pasar kumpulan ikon sosial saat ini.
Shahnur Alam ingin membantu mengubahnya dengan menyediakan (membangun dirinya sendiri) sejumlah besar ikon sosial bulat untuk jejaring sosial paling populer.
Kumpulan khusus ini muncul di situs penulis MINIMALISTIK, jurnal pribadi, dan semacamnya.
Tombol Sosial dengan Font Ikon
David Pottrell telah mengembangkan dan berbagi hal-hal untuk waktu yang lama sekarang. Tombol sosialnya diatur dengan font ikon built-in adalah salah satu eksekusi paling halus dari konsep set ikon semacam itu.
Visi David adalah memberikan solusi ikon sosial dengan skema warna yang sesuai. Untuk melengkapi semua ini, ia menambahkan font ikon merek di sebelah setiap elemen. TINDAKAN ini menyegel kesepakatan untuk keaslian masing-masing ikon.
Kami kagum dengan keterampilan HTML5, dan CSS3 yang dibawakan oleh David ke perhatian kami.
Tombol Sosial Kecantikan FLAT dengan transisi CSS3
Desain FLAT belum konsisten dalam pengumpulan kami di sini. Namun, kami akan mencoba memperbaikinya dengan memperkenalkan beberapa karya yang benar-benar spektakuler dan indah dari SMTashrik Anam.
Dia ingin memberikan ikon yang menggunakan EFEK TRANSISI CSS3 untuk memperkuat pengalaman berbagi sosial yang dinamis dan interaktif.
Gulirkan ke atas setiap ikon dan lihat bagaimana mereka terungkap untuk mengungkap teks pilihan Anda yang spesifik.
Tombol Sosial CSS Sederhana
Sederhana tidak pernah mengecewakan, meskipun beberapa orang mungkin menyebut set khusus ini yang modern dan agak rumit . Kami benar-benar percaya bahwa ini adalah salah satu set sosial paling sederhana di daftar kami sejauh ini.
Anda dapat menggunakan template ini daripada langsung tombol berbagi sosial dalam halaman konten kami. Yang ini akan bekerja dengan baik dalam situasi di mana kami ingin mempromosikan profil kami. Bundel ini mendukung Forrst, Dribbble, Flickr, Designmoo dan banyak lainnya.
Luangkan waktu untuk memeriksanya dan mungkin UJI di situs Anda sebelum MEMBUAT keputusan akhir.
Berguling Tombol Sosial
Ikon Roll Over mengatur fitur Soundcloud, Pinterest, Facebook, YouTube dan ikon Twitter.
Ikon-ikon ini akan memungkinkan Anda untuk menyisipkan teks roll-over . Teks-teks ini akan muncul setiap kali pengunjung menggulung salah satu ikon dari set ini.
Hugo Darby-Brown telah membuat yang ini. Dia menggunakan teknologi CSS3 murni untuk membuat template ini dan memberikan pengalaman berbagi yang mulus.
Di atas terdaftar dan ikon sosial berbasis HTML/CSS. Jika Anda mencari yang dapat Anda gunakan di Adobe Photoshop, Illustrator, atau lainnya, Anda mungkin ingin memeriksa koleksi ikon ini.
Beri tahu kami jika Anda menyukai postingan tersebut.