Hey so here it is
[CODE lang="html" title="Index.html"]<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - 3D SOCIAL MEDIA ICON</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- powered by YEK (https://github.com/yek-org) -->
<!-- Instagram : @mikoloism -->
<!-- Codepen : @miko-github -->
<div class="yek-social">
<ul class="yek-social__list">
<li class="yek-social__item">
<a class="yek-social__link" href="#">
<span class="yek-social__button yek-social__button--gmail">
<i class="yek-social__icon yek-social__icon--gmail fa fa-envelope"></i>
</span>
</a>
</li>
<li class="yek-social__item">
<a class="yek-social__link" href="#">
<span class="yek-social__button yek-social__button--github">
<i class="yek-social__icon yek-social__icon--codepen fab fa-github-alt"></i>
</span>
</a>
</li>
<li class="yek-social__item">
<a class="yek-social__link" href="#">
<span class="yek-social__button yek-social__button--codepen">
<i class="yek-social__icon yek-social__icon--codepen fab fa-codepen"></i>
</span>
</a>
</li>
</ul>
</div>
<!-- partial -->
</body>
</html>
[/CODE]
[CODE lang="css" title="style.css"]/* YEK (https://github.com/yek-org)
-------------------------------------- */
/* variables
---------------------------- */
/* 3D-BOX ($bx-)
------------------------- */
/* resets
---------------------------- */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 100%;
height: 100vh;
background-color: #f9f9f9;
color: #fff;
font-size: 1rem;
}
li {
list-style: none;
}
a {
color: #69c;
text-decoration: none;
cursor: pointer;
}
/* stylesheets
---------------------------- */
.yek-social {
width: 650px;
height: 250px;
padding: 9px;
border-radius: 9px;
background-color: #444;
box-shadow: 1px 1px 4px rgba(68, 68, 68, 0.5);
/* animaitons
------------------------- */
}
.yek-social__list, .yek-social__item, .yek-social__link, .yek-social__button {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.yek-social__list, .yek-social__link {
width: 100%;
height: 100%;
}
.yek-social__list {
justify-content: space-between;
}
.yek-social__item {
width: 32%;
height: 100%;
border-radius: 9px;
background-color: #fff;
}
.yek-social__button {
width: 72px;
height: 72px;
background-color: #fff;
box-shadow: -20px 20px 5px rgba(68, 68, 68, 0.5);
text-align: center;
transition: 0.5s 0.15s;
}
.yek-social__button {
position: relative;
transform: perspective(1000px) rotate(-25deg) skew(25deg);
}
.yek-social__button::before, .yek-social__button::after {
content: "";
position: absolute;
background-color: #b1b1b1;
}
.yek-social__button::before {
width: 21px;
height: 100%;
top: 10px;
left: -20px;
transition: 0.5s 0.15s;
transform: rotate(0deg) skewY(-45deg);
}
.yek-social__button::after {
width: 100%;
height: 21px;
bottom: -20px;
left: -10px;
transition: 0.8s 0.15s;
transform: rotate(0deg) skewX(-45deg);
}
.yek-social__icon {
color: #444;
font-size: 1.7em;
transition-delay: 0.4s;
}
.yek-social__link:hover .yek-social__icon {
color: #fff;
}
.yek-social__link:hover .yek-social__button {
transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(20px, -20px);
}
.yek-social__link:hover .yek-social__button--gmail {
background-color: #ea4335;
box-shadow: -50px 50px 50px rgba(234, 67, 53, 0.5);
}
.yek-social__link:hover .yek-social__button--gmail::before {
background-color: #ec584c;
}
.yek-social__link:hover .yek-social__button--gmail::after {
background-color: #f6aea8;
}
.yek-social__link:hover .yek-social__button--github {
background-color: #404840;
box-shadow: -50px 50px 50px rgba(64, 72, 64, 0.5);
}
.yek-social__link:hover .yek-social__button--github::before {
background-color: #4c564c;
}
.yek-social__link:hover .yek-social__button--github::after {
background-color: #7d8b7d;
}
.yek-social__link:hover .yek-social__button--codepen {
background-color: #222222;
box-shadow: -50px 50px 50px rgba(34, 34, 34, 0.5);
}
.yek-social__link:hover .yek-social__button--codepen::before {
background-color: #2f2f2f;
}
.yek-social__link:hover .yek-social__button--codepen::after {
background-color: #626262;
}[/CODE]
just make two files, 1 index.html and 2 style.css and away you go
or download and unzip the file i have attached.