<html>
<head>
<title>Social Media Buttons</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>
<a href="#" id="f"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#" id="t"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#" id="g"><i class="fab fa-google-plus-g"></i></a>
</li>
<li>
<a href="#" id="l"><i class="fab fa-linkedin-in"></i></a>
</li>
<li>
<a href="#" id="i"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</body>
</html>body{
margin: 0;
padding: 0;
background: #ccc;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
}
ul li{
list-style: none;
margin: 0 40px;
}
ul li a .fab{
font-size: 40px;
color: #262626;
line-height: 80px;
transition: .5s;
}
ul li a{
position: relative;
display: block;
width: 80px;
height: 80px;
background: #fff;
text-align: center;
transform: perspective(0px) rotate(-30deg) skew(25deg) translate(0,0);
transition: .5s;
box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
ul li a:before{
content: "";
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
background: #b1b1b1;
transition: .5s;
transform: rotate(0deg) skewY(-45deg);
}
ul li a:after{
content: "";
position: absolute;
bottom: -20px;
left: -10px;
height: 20px;
width: 100%;
background: #b1b1b1;
transition: .5s;
transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.