Membuat Sendiri Share Button Melayang Dengan Css

Membuat sendiri share button melayang dengan CSS bisa menjadi solusi yang mudah untuk meningkatkan pengalaman pengguna di website kamu. Sudahkah kamu tahu bahwa membuat sendiri share button melayang dengan CSS bisa menjadi cara terbaik untuk membuat website kamu lebih menarik dan menarik?

Jika kamu tertarik untuk membuat share button melayang dengan CSS, artikel ini akan menjadi solusi yang tepat bagi kamu. Artikel ini akan membantu kamu memahami cara membuat sendiri share button melayang dengan CSS dengan cara yang mudah dan sederhana. Artikel ini akan memberikan informasi yang berguna tentang bagaimana membuat share button melayang dengan CSS. Jadi, jangan lewatkan kesempatan ini untuk membaca artikel ini hingga selesai!

Membuat Sendiri Share Button Melayang Dengan CSS

Apa Itu Share Button?

Share button adalah tombol yang digunakan untuk berbagi informasi di berbagai jaringan sosial, seperti Facebook, Twitter, Instagram, dll. Tombol ini memungkinkan pengguna untuk berbagi link, gambar, dan bahkan video dengan mudah dan cepat. Tombol ini juga bisa membantu meningkatkan lalu lintas website dan meningkatkan jumlah pengunjung situs web.

Cara Membuat Share Button Melayang Dengan CSS

Untuk membuat sendiri share button dengan css, Anda harus memiliki pengetahuan tentang HTML dan CSS. Kami juga akan menggunakan plugin Jquery untuk membuat efek melayang pada share button. Berikut ini adalah langkah-langkahnya:

Langkah 1: Membuat HTML

Pertama, Anda harus membuat HTML untuk tombol berbagi. Berikut adalah contoh kode HTML yang dapat Anda gunakan:

<div class=share-buttons> <a href=https://www.facebook.com/sharer/sharer.php?u=http://www.example.com target=blank><img src=images/facebook.png alt=Facebook /> </a> <a href=https://twitter.com/intent/tweet?url=http://www.example.com target=blank><img src=images/twitter.png alt=Twitter /></a> <a href=https://plus.google.com/share?url=http://www.example.com target=blank><img src=images/google.png alt=Google+ /></a> <a href=https://www.linkedin.com/shareArticle?mini=true&url=http://www.example.com target=blank><img src=images/linkedin.png alt=LinkedIn /></a></div>

Dalam kode di atas, kita telah menggunakan beberapa gambar untuk masing-masing tombol berbagi. Anda dapat menggunakan gambar apa saja yang Anda suka. Anda juga dapat menambahkan lebih banyak tombol berbagi jika diinginkan.

Langkah 2: Menambahkan CSS

Setelah Anda selesai membuat HTML untuk tombol berbagi, Anda harus menambahkan CSS untuk membuatnya melayang. Berikut adalah kode CSS yang dapat Anda gunakan:

.share-buttons { position: relative; z-index: 1; margin-top: 10px;}.share-buttons a { display: inline-block; width: 32px; height: 32px; margin-right: 10px; background-position: center; background-size: cover; text-decoration: none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; position: absolute; top: 0; left: 0;}.share-buttons a:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px);}

Dalam kode di atas, kami telah menggunakan beberapa properti CSS untuk membuat efek melayang pada share button. Sekarang semua yang Anda perlu lakukan adalah menambahkan kode ini ke halaman web Anda.

Langkah 3: Menambahkan Jquery

Terakhir, Anda harus menambahkan plugin Jquery untuk membuat share button melayang. Anda dapat mengunduh plugin Jquery dari situs resmi Jquery. Setelah plugin terinstal, Anda harus menambahkan kode berikut ke halaman web Anda:

$(document).ready(function(){ $('.share-buttons a').hover(function(){ $(this).animate({ 'margin-top': '-5px' }, 200); }, function(){ $(this).animate({ 'margin-top': '0' }, 200); });});

Itulah cara membuat share button melayang dengan CSS. Selain itu, Anda juga dapat menggunakan plugin atau skrip JavaScript lain untuk membuat efek melayang pada tombol berbagi Anda. Semoga tutorial ini bermanfaat bagi Anda.

Terima kasih telah membaca artikel tentang cara Membuat Sendiri Share Button Melayang Dengan Css. Semoga artikel ini bermanfaat untuk Anda. Jika Anda memiliki pertanyaan tentang topik ini, jangan ragu untuk bertanya di kolom komentar di bawah ini.

Terima kasih atas kunjungan Anda dan sampai jumpa lagi di blog kami.