카테고리 없음
Social media icon
개발남자
2022. 10. 15. 01:43
<html>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<head></head>
<body>
<ul>
<li><a href="#"><i class="fa-brands fa-instagram instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp whatsapp"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter twitter"></i></a></li>
</ul>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
ul {
position: relative;
display: flex;
}
ul li {
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a {
text-decoration: none;
}
ul li a .fa-brands {
font-size: 6em;
color: #222;
}
ul li a::before {
font-family: "FontAwesome";
position: absolute;
top: 0;
left: 0;
font-size: 6em;
height: 0;
overflow: hidden;
transition: 0.5s ease-in-out;
}
ul li:nth-child(1) a::before {
content: "\f16d";
background-image: linear-gradient(45deg,
#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,
#bc1888 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-bottom: 4px solid #dc2743;
}
ul li:nth-child(2) a::before {
content: "\f232";
color: #25D366;
border-bottom: 4px solid #25D366;
}
ul li:nth-child(3) a::before {
content: "\f099";
color: #1DA1F2;
border-bottom: 4px solid #1DA1F2;
}
ul li:hover a::before {
height: 100%;
}