Cara Membuat Social Media Button Type 2

Cara Membuat Social Media Button Type 2

HobbyTekno - Lanjutan dari Postingan sebelumnya, kali ini beda style yaitu versi ke-2 nya. Social Media button kali ini ada Animasi yang keren ketika di hover, penasaran? Langsung saja ikuti cara buatnya sebagai berikut :

Langkah-Langkah Membuat Social Media Button Type 2


1. Salin Script berikut, simpan sebagai .html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  <body>
    <div class="social-buttons">
      <a href="#"><i class="fab fa-facebook-f"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
      <a href="#"><i class="fab fa-linkedin-in"></i></a>
    </div>
  </body>
</html>
2. Salin kode berikut sebagai style.css
body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f1f1;
}

.social-buttons a{
  display: inline-flex;
  text-decoration: none;
  font-size: 18px;
  width: 60px;
  height: 60px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
}

.social-buttons a::before{
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg,#22a6b3,#30336b);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before{
  transform: scale(0);
}

.social-buttons a i{
  transition: 0.3s ease-in;
}

.social-buttons a:hover i{
  background: linear-gradient(45deg,#22a6b3,#30336b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}
3. Lalu buka file .html tadi untuk melihat hasilnya, Tampilannya akan seperti berikut ini.

Cara Membuat Social Media Button #2

Sekian Cara Membuat Social Media Button Type 2, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Cara Membuat Social Media Button Type 2"