Ikon Media Sosial CSS dengan Efek Hover

sukma
sukma
4 minute read

Saat ini, setiap pengembang web ingin mengeksplorasi desain trendi untuk setiap komponen halaman web. Entah itu berkaitan dengan gaya tombol atau efek melayang di CSS atau semacamnya. Jadi, saya di sini untuk menunjukkan kepada Anda beberapa cara mendesain ikon media sosial modern dengan efek hover yang indah menggunakan CSS.

Dalam konsep desain web modern, menempatkan ikon media sosial adalah bagian terpenting dari sebuah halaman web. Tombol-tombol ini dapat digunakan untuk menautkan profil sosial situs web Anda.

Dengan demikian, pengguna / pelanggan Anda dapat dengan mudah berkomunikasi dengan Anda. Singkatnya, itu adalah cara yang baik untuk tetap berhubungan dengan pengguna Anda yang sudah ada.

Kami akan menggunakan Perpustakaan Font Awesome CSS untuk ikon dan beberapa atribut CSS untuk mengubah tautan sosial (HTML anchor) menjadi tombol yang Anda lihat pada gambar di atas. Anda benar-benar bebas menambahkan beberapa fungsi tambahan di tautan sosial ini sesuai dengan kebutuhan Anda.

Bagaimana Mendesain Ikon Media Sosial dengan CSS

Baik! sekarang, mari mulai mendesain prosesnya tanpa membahas lebih dalam. Pertama-tama, pastikan Anda telah menyertakan font ikonik "Font Awesome" dalam proyek web Anda.

Anda dapat menambahkan pustaka CSS ini dengan menambahkan yang berikut ini CDN terhubung ke head tag dokumen HTML Anda. Jika Anda sudah melakukannya, lewati saja langkah ini.

<!-- Font Awsome CSS for icons --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Setelah itu, buat semua tautan sosial yang diperlukan dalam HTML, bungkus semuanya di induk div elemen dan tentukan nama kelasnya "social-btns".

Tambahkan juga nama kelas "btn" ke setiap tautan dan kelas unik (sesuai dengan nama media sosial) yang akan kami gunakan untuk menentukan warna tertentu di CSS untuk tombol itu.

Setiap jangkar memiliki ikon Font Awesome yang ditempatkan i menandai. Kamu bisa telusuri 400+ ikon jika Anda ingin menggunakan yang khusus.

HTML

Berikut ini adalah struktur HTML lengkap untuk tautan / tombol media sosial.

  <div class="social-btns">     <a class="btn facebook" href="https://codeconvey.com/social-media-icons-hover-effect-css/#"><i class="fa fa-facebook"></i></a>     <a class="btn twitter" href="https://codeconvey.com/social-media-icons-hover-effect-css/#"><i class="fa fa-twitter"></i></a>     <a class="btn youtube" href="https://codeconvey.com/social-media-icons-hover-effect-css/#"><i class="fa fa-youtube-play"></i></a>     <a class="btn instagram" href="https://codeconvey.com/social-media-icons-hover-effect-css/#"><i class="fa fa-instagram"></i></a>     <a class="btn pinterest" href="https://codeconvey.com/social-media-icons-hover-effect-css/#"><i class="fa fa-pinterest"></i></a>   </div>

Tambahkan tautan profil media sosial Anda "https://codeconvey.com/social-media-icons-hover-effect-css/#" sesuai dengan masing-masing ikon sosial. Jika Anda ingin membuka link ini di tab baru, cukup tambahkan atribut target dengan nilai "_blank" untuk setiap link.

CSS

Sekarang saatnya untuk memberi style pada link tersebut, berikut ini adalah kode CSS lengkap yang akan menghasilkan tombol media sosial yang indah dengan ikon dan efek hover.

.social-btns .btn, .social-btns .btn:before, .social-btns .btn .fa {   transition: all 0.35s;   transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59); } .social-btns .btn:before {   top: 90%;   left: -110%; } .social-btns .btn .fa {   -webkit-transform: scale(0.8);   transform: scale(0.8); } .social-btns .btn.facebook:before {   background-color: #3b5998; } .social-btns .btn.facebook .fa {   color: #3b5998; } .social-btns .btn.twitter:before {   background-color: #00aff0; } .social-btns .btn.twitter .fa {   color: #00aff0; } .social-btns .btn.youtube:before {   background-color: #c4302b; } .social-btns .btn.youtube .fa {   color: #c4302b; } .social-btns .btn.instagram:before {   background-color: #bf00ff; } .social-btns .btn.instagram .fa {   color: #bf00ff; } .social-btns .btn.pinterest:before {   background-color: #cc0000; } .social-btns .btn.pinterest .fa {   color: #cc0000; } .social-btns .btn:focus:before, .social-btns .btn:hover:before {   top: -10%;   left: -10%; } .social-btns .btn:focus .fa, .social-btns .btn:hover .fa {   color: #fff;   -webkit-transform: scale(1);   transform: scale(1); } .social-btns {   height: 90px;   margin: 20px auto;   font-size: 0;   text-align: center;   position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0; } .social-btns .btn {   display: inline-block;   background-color: #fff;   width: 90px;   height: 90px;   line-height: 90px;   margin: 0 10px;   text-align: center;   position: relative;   overflow: hidden;   border-radius: 28%;   box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);   opacity: 0.99; } .social-btns .btn:before {   content: "";   width: 120%;   height: 120%;   position: absolute;   -webkit-transform: rotate(45deg);   transform: rotate(45deg); } .social-btns .btn .fa {   font-size: 38px;   vertical-align: middle; }

Panduan Kustomisasi CSS

Jika Anda ingin mengontrol: perilaku hover dan: fokus, Anda dapat meneruskan beberapa nilai tambahan di CSS di atas. Demikian pula, Anda dapat mengatur ukuran khusus, ikon dan kecepatan transisi untuk hover, dll.

Untuk mengubah ukuran tombol, teruskan nilai kustom (dalam px) dengan mengedit kode CSS berikut.

.social-btns .btn {   width: 40px;   height: 40px;   line-height: 40px; }

Jika Anda ingin menyetel kecepatan transisi khusus, perbarui yang berikut ini.

  transition: all 0.35s;