Cara Membuat Social Media Button Type 3
HobbyTekno - Pada Postingan ini Admin akan membahas lagi Cara Membuat Social Media Button keren part 3, Nah Menurut admin ini yang paling keren apalagi saat Tombol Social Medianya di Hover animasinya sangat menarik. Berikut cara membuatnya :
Langkah-Langkah Membuat Social Media Button Type 3
1. Salin Script berikut, simpan sebagai .html
Sekian Cara Membuat Social Media Button Type 3, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar
<!DOCTYPE html>2. Salin kode berikut sebagai style.css
<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.4.1/css/all.css">
</head>
<body>
<div class="middle">
<a class="btn" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-google"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-youtube"></i>
</a>
</div>
</body>
</html>
body{3. Lalu buka file .html tadi untuk melihat hasilnya, Tampilannya akan seperti berikut ini.
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}
Sekian Cara Membuat Social Media Button Type 3, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar
Komentar