Cara Membuat Ikon Sosial Media HTML CSS

Teknologiku22 Kali ini saya akan memberikan cara kepada temen-temen tentang  membuat ikon media sosial  dengan efek cahaya menggunakan Html dan css. Widget  Sosial  Media adalah widget sederhana yang memungkinkan pengguna untuk memasukkan jejaring sosial dan URL media sosial  mereka dan opsi berlangganan lainnya untuk menampilkan ikon ke situs media sosial itu.
Pada awalnya, ikon-ikon ini berada pada tahap awal di mana tidak ada efek cahaya. Tetapi ketika Anda mengarahkan kursor ke atasnya, ikon melayang tertentu mulai bersinar. Pada gambar, ada 2 Daftar Widget Media Sosial dengan ikon yang sama tetapi dengan warna cahaya yang berbeda. Pada widget pertama terdapat efek glowing warna emas dan pada widget kedua terdapat efek default warna logo glowing.    
Jika kamu  merasa kesulitan memahami apa yang saya katakan. kamu dapat  menonton video tutorial lengkap pada program ini (Widget Ikon Sosial  Media Bersinar).  Video Tutorial Ikon Sosial Media  CSS Glowing di paling bawah. dan saya harap kamu menyukai efek bercahaya ini dan memahami kode dasar yang saya berikan .


membuat  Ikon Sosial  Media Bersinar Menggunakan HTML & CSS [source codes]

berikut cara pembuatanya .

1. kamu perlu membuat dua File satu File HTML dan satu lagi adalah File CSS.

2. Setelah membuat file-file ini cukup tempelkan kode berikut di file kamu. 

3.Pertama, buatlah file HTML dengan nama index.html dan tempel kode HTML yang saya diberikan di file HTML kamu. Ingat, Anda harus membuat file dengan ekstensi .html.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Glowing Social Icons</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <ul>
         <li><i class="fab fa-facebook-f"></i></li>
         <li><i class="fab fa-twitter"></i></li>
         <li><i class="fab fa-instagram"></i></li>
         <li><i class="fab fa-linkedin-in"></i></li>
         <li><i class="fab fa-youtube"></i></li>
      </ul>
   </body>
</html>
Kedua, buat file CSS dengan nama style.css dan tempel kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan ekstensi .css.


*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body{
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #262626;
}
ul{
  display: flex;
}
ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
ul li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
ul li:nth-child(1):before{
  background: #4267B2;
}
ul li:nth-child(2):before{
  background: #1DA1F2;
}
ul li:nth-child(3):before{
  background: #E1306C;
}
ul li:nth-child(4):before{
  background: #2867B2;
}
ul li:nth-child(5):before{
  background: #ff0000;
}
ul li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
/* ul li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
} */


untuk penjelasan yang lebih lengkap kamu bisa simak video yang sudah saya berikan di bawah ini 

Seperti yang kamu lihat di video ini adalah efek yang hanya didasarkan pada HTML & CSS. Dan, saya yakin seorang pemula yang memiliki pengetahuan dasar tentang HTML & CSS juga dapat membuat jenis efek cahaya seperti ini.  Jika kamu menyukai program ini jangan lupa untuk berkomentar di bawah ya.

Cukup itu saja yang dapat saya ajarkan di dalam artikel ini semogra bermanfaat. Nah,sekarang kamu telah berhasil membuat Widget Ikon Media Sosial Bersinar hanya dengan menggunakan HTML & CSS. Jika kode kmau tidak berfungsi atau kamu menghadapi kesalahan/masalah, silakan beri komentar atau hubungi saya lewat halaman kontak.

tkutdcgutdkgfvjhvhjvjhvhvhhv