Membuat Sosial Media Buttons KEREN
Hai sobat komputer, kali ini saya akan membagikan sebuah cara dalam membuat sosial media buttons yang keren dan animatif sehingga membuat tampilannya sangat menarik. Sosial media yang akan kita buat kali ini menggunakan kombinasi warna putih dan biru laut atau biru langit. Oke guys langsung saja kita buat.
Seperti biasa yang kita lakukan diawal adalah membuat file HTML dan CSS.
Pertama kita buat dulu HTML dengan source code yang ada dibawah ini. Copy semua source codenya kemudian jangan lupa di save dan beri nama index.html sebenarnya untuk bagian file HTML nama bisa diganti sih.
Berikut source codenya :
<!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.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>
Kemudian kita buat file style untuk memberikan efek animasi dan tampilan dengan membuat file CSS berinama style.css disesuaikan dengan nama pencarian di file HTML yaitu href="style.css"
body{
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%;
}
}
itulah bagaimana cara membuat social media buttons dengan tampilan menarik, semoga artikel ini bermanfaat dan sampai jumpa di artikel selanjutnya jangan lupa ikuti terus artikel terbaru dari blog ini, terima kasih.
0 Response to "Membuat Sosial Media Buttons KEREN"
Post a Comment