4.2K
3D layer social media buttons
Welcome to you in techmidpoint tutorial. In this post, I am going to make 3d layer social media buttons using HTML and CSS. When you move the mouse over the social media buttons the buttons display with 3d layers with different opacity.
HTML
<!DOCTYPE html>
<html>
<head>
<title>3D Layer Social media buttons</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-facebook"></span>
</a>
</li>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-twitter"></span>
</a>
</li>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-youtube"></span>
</a>
</li>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-linkedin"></span>
</a>
</li>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-instagram"></span>
</a>
</li>
</ul>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
ul
{
display: flex;
position: absolute;
list-style: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
ul li
{
position: relative;
list-style: none;
width: 100px;
height: 100px;
margin: 0 50px;
transform: rotate(-30deg) skew(25deg);
background: #ccc;
}
ul li span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
transition: 0.5s;
display: flex !important;
align-items: center;
justify-content: center;
color: #fff;
font-size: 50px !important;
}
ul li:hover span
{
box-shadow: -1px 1px 1px rgba(0,0,0,.1);
}
ul li:hover span:nth-child(5)
{
transform: translate(40px, -40px);
opacity: 1;
}
ul li:hover span:nth-child(4)
{
transform: translate(30px, -30px);
opacity: .8;
}
ul li:hover span:nth-child(3)
{
transform: translate(20px, -20px);
opacity: .6;
}
ul li:hover span:nth-child(2)
{
transform: translate(10px, -10px);
opacity: .4;
}
ul li:hover span:nth-child(1)
{
transform: translate(0,0);
opacity: .2;
}
ul li:nth-child(1) span
{
background: #3b5999;
}
ul li:nth-child(2) span
{
background: #55acee;
}
ul li:nth-child(3) span
{
background: #dd4b39;
}
ul li:nth-child(4) span
{
background: #0077B5;
}
ul li:nth-child(5) span
{
background: #e4405f;
}
For More Tutorials Please Click Here
