<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNS 버튼</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
/*===== 버튼의 처음 상태 =====*/
.wrap {
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%); /*부모 박스의 너빗값이 여유롭게 지정되어야 한다.*/
}
.btn {
display:block; float:left; position:relative;
width:90px; height:90px; margin:10px;
font-size:26px; color:#3498DB; text-align:center; line-height:90px;
background:#F2F2F2; border-radius:30%;
box-shadow:0 5px 15px rgba(0,0,100,0.4);
overflow:hidden;
}
.btn::before { /*.btn 왼쪽에 박스를 생성*/
content:"";
position:absolute; left:-110px; top:90%;
width:120%; height:120%;
transform:rotate(45deg);
}
.btn1::before {background:#3498DB;}
.btn2::before {background:#030;}
.btn3::before {background:#F03;}
.btn i {transition:all 0.4s ease;}
/*===== 버튼의 마우스 오버 상태 =====*/
.btn:hover i {color:#F2F2F2; transform:scale(1.2);}
.btn:hover::before {
left:-10%; top:-10%;
animation:btnAction 0.6s 1;
}
/*===== 애니메이션:1. 애니메이션 등록, 2. 애니메이션 적용 =====*/
/*애니메이션 등록*/
@keyframes btnAction {
0% {left:-110px; top:90%;}
85% {left:10%; top:-30%;}
100% {left:-10%; top:-10%;}
}
</style>
<script src="https://kit.fontawesome.com/11390cb447.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<a href="#" class="btn btn1"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="btn btn2"><i class="fa-brands fa-youtube"></i></a>
<a href="#" class="btn btn3"><i class="fa-brands fa-facebook-f"></i></a>
</div>
</body>
</html>