Home » 3D layer social media buttons

3D layer social media buttons

by techmidpoint
3D layer social media buttons

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

You may also like

Leave a Comment