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="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></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.

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

HobbyTekno

Sunday, December 1, 2019

Cara Membuat Social Media Button Type 1

Langkah-Langkah Membuat Social Media Button Type 1

Komentar