3.1K
3D black social media buttons
Welcome back to you another tutorial of techmidpoint. Social media is an important part of modern web technology. So In this tutorial, I am going to make 3D black social media buttons with a hover effect. When you move the mouse over the social media buttons then you can see the hover effect also.
Just copy the given source code and paste into your text editor and run it. You can modify it according to your desire. Let’s see the example.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Black 3D social media buttons </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="social">
<a href=""><i class="fab fa-facebook"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-youtube"></i></a>
<a href=""><i class="fab fa-linkedin"></i></a>
</div>
</body>
</html>
CSS
body {
background: rgba(20, 120, 150, 1);
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
.wrap {
}
.social {
display: flex;
margin: 30px;
}
.social a {
display: block;
background: rgba(0, 0, 0, 1);
padding: 20px;
transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(0, 0);
box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
margin: 40px;
}
.social a::before {
dislpay: block;
content: "";
position: absolute;
width: 20px;
height: 100%;
left: -20px;
top: 10px;
background: rgba(0, 0, 0, 0.7);
transform: rotate(0deg) skewY(-45deg);
}
.social a::after {
dislpay: block;
content: "";
position: absolute;
bottom: -20px;
left: -10px;
height: 20px;
width: 100%;
transform: rotate(0deg) skewX(-45deg);
background: rgba(0, 0, 0, 0.7);
transform: rotate(45deg) scewY(-45deg);
}
.social a:hover {
transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(20px, -20px);
box-shadow: -50px 50px 30px rgba(0, 0, 0, 0.5);
}
.social a i {
color: rgba(256, 256, 256, 1);
font-size: 30pt;
}
For More Tutorials Please Click Here
