Contoh Tombol Bagikan Media Sosial

Kasus ini menampilkan empat tombol berbentuk persegi panjang untuk membagikan informasi di media yang paling populer. Mereka mempertahankan warna asli dan menampilkan nama serta simbol media tersebut. Ini adalah contoh yang baik dari kustomisasi untuk situasi di mana Anda ingin tombol-tombol Anda diletakkan di zona konten, misalnya pada sebuah artikel.

Begini cara membuat tombol yang praktis bagi semua pengguna — tata letak yang melayang membuat tombol mengikuti gulir naik-turun halaman dan selalu siap diakses. Tak ada peluang tombol itu terlewat dari pandangan. Desainnya minimalis, berbentuk persegi, dengan hanya ikon media pada tombol.

Dengan opsi kustomisasi, Anda bisa meraih tampilan widget yang benar-benar unik. Tombol-tombol ini dirancang untuk mencerminkan gaya umum dan warna situs web. Mereka hitam-putih, geometris, dan minimalis berkat hanya menampilkan ikon media—tanpa nama.

Tombol-tombol cantik dan kecil ini terlihat sangat rapi dan bersih di halaman. Berbentuk lingkaran dengan gaya material, menampilkan simbol media yang dipilih. Efek animasi geser yang halus saat kursor melayang menambah kesan dinamis pada pengalaman pengguna. Tombol-tombol ini diatur ke tengah, tetapi Anda juga bisa memilih varian kiri atau kanan.

Tombol-tombol ini berbentuk lingkaran, tetapi berkat lebar yang responsif, ukurannya diubah menjadi oval agar terlihat lebih mantap. Pengguna telah memilih varian Flat pada Gaya dan mempertahankan warna media asli, namun menambahkan warna hitam serta animasi melenting saat kursor melayang.

Ikon berbentuk persegi ditempatkan rapi dalam grid dan menampilkan ikon serta teks dengan nama-nama media. Mereka akan muat di zona konten, bagian akhir sebuah artikel atau bagian bawah halaman. Animasi slider yang menarik aktif pada simbol, dan ikon menjadi hitam saat di-hover.

Penulis telah mengubah label tombol dan menambahkan ajakan bertindak pada masing-masing tombol. Tidak ada ikon media – sebagai gantinya nama-namanya ditambahkan. Latar belakang tombol telah diubah menjadi putih dan warna teksnya adalah warna asli masing-masing media untuk membangun asosiasi visual.

Untuk memudahkan pengguna membagikan konten, dalam contoh ini, ada tombol untuk messenger yang paling populer. Tombol-tombolnya mempertahankan warna asli dan menampilkan nama serta ikon secara bersamaan. Mereka berbentuk bulat, dan berkat lebar otomatis, mereka mengisi ruang yang tepat di halaman.