Sunday, December 1, 2019

Cara Membuat Social Media Button Type 1

Cara Membuat Social Media Button Type 1

HobbyTekno - Pada Postingan kali ini admin akan share Cara Membuat Social Media Button yang Keren, bisa anda implementasikan pada Blog dan Website anda. Langsung saja berikut cara buatnya:

Langkah-Langkah Membuat Social Media Button Type 1


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://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  </head>
  <body>
    <div class="s-m">
      <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-google-plus-g"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </body>
</html>
2. Salin kode berikut sebagai style.css
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}
body{
  background: #f1f1f1;
}
.s-m{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.s-m a{
  display: inline-flex;
  width: 40px;
  height: 40px;
  background: #2c3e50;
  color: white;
  margin: 0 6px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  font-size: 22px;
}
.s-m a:hover{
  background: #e67e22;
}
.s-m a i{
  transition: 0.4s all;
}
.s-m a:hover > i{
  transform: scale(1.6) rotate(25deg);
}
3. Lalu buka file .html tadi untuk melihat hasilnya, Tampilannya akan seperti berikut ini.

Cara Membuat Social Media Button #1

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

Komentar


EmoticonEmoticon