Cara membuat Sosial Media button dan animasi sederhana menggunakan HTML + CSS
by
muzadidil
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
</head>
<body>
<div class="sm">
<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>
<a href="#"><i class="fab fa-behance"></i></a>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2c3a47;
}
.sm a{
display: inline-block;
font-size: 40px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #6ab04c;
margin: 0 16px;
transition: .4s linear;
position: relative;
}
.sm a::before, .sm a::after{
content: '';
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: .4s linear;
}
.sm a:hover{
transform: scale(.8);
}
.sm a:hover::before{
border-left: 4px solid;
border-right: 4px solid;
transform: skewX(20deg);
}
.sm a:hover::after{
border-top: 4px solid;
border-bottom: 4px solid;
transform: skewY(-20deg);
}
Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar