Social Icon on hover 3d CSS Effects

Social media sharing button 3d effect on hover. A 3d CSS effects of social media icons.

Use only CSS 3D animation effect on hover of these simple but fun social buttons. Fully responsive social media 3D effects buttons built on top of CSS3.

You might have seen many types of social icon hover effects, But In this article, I’m going to show you, how to create the Social Icon on hover 3d CSS Effects.

I got this code from CodePen. I just changed some code and share this code through my website.

If you want to know more or if you would like more effects then you can visit here. And you can also check my another tutorial on how to create Text Break Effects On Hover.

HTML

<ul>
	<li>
		<a href="#">
			<i class="fa fa-facebook" aria-hidden="true"></i>
			<span> - Facebook</span>
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-twitter" aria-hidden="true"></i>
			<span> - Twitter</span>
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-linkedin" aria-hidden="true"></i>
			<span> - Linkedin</span>
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-instagram" aria-hidden="true"></i>
			<span> - Instagram</span>
		</a>
	</li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
body {
	margin: 0;
	padding: 0;
	background: #ccc;
	font-family: 'Roboto Condensed', sans-serif;

}

ul {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	margin: 0;
	padding: 0;
}

ul li {
	list-style: none;
	margin: 0 5px;
}

ul li a .fa {
	font-size: 40px;
	color: #262626;
	line-height: 80px;
	transition: .5s;
	padding-right: 14px;
}

ul li a span {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 30px;
	color: #262626;
	letter-spacing: 4px;
	transition: .5s;
}

ul li a {
	text-decoration: none;
	display: absolute;
	display: block;
	width: 210px;
	height: 80px;
	background: #fff;
	text-align: left;
	padding-left: 20px;
	transform: 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;
	transform: .5s;
	transform: rotate(0deg) skewY(-45deg);
}

ul li a:after {
	content: '';
	position: absolute;
	bottom: -20px;
	left: -10px;
	height: 20px;
	width: 100%;
	background: #b1b1b1;
	transform: .5s;
	transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
	transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
	box-shadow: -50px 50px 50px rgba(0, 0, 0, .5);
}

ul li:hover .fa {
	color: #fff;
}

ul li:hover span {
	color: #fff;
}

ul li:hover:nth-child(1) a {
	background: #3b5998;
}

ul li:hover:nth-child(1) a:before {
	background: #365492;
}

ul li:hover:nth-child(1) a:after {
	background: #4a69ad;
}

ul li:hover:nth-child(2) a {
	background: #00aced;
}

ul li:hover:nth-child(2) a:before {
	background: #097aa5;
}

ul li:hover:nth-child(2) a:after {
	background: #53b9e0;
}

ul li:hover:nth-child(3) a {
	background: #0077b5;
}

ul li:hover:nth-child(3) a:before {
	background: #0077b5;
}

ul li:hover:nth-child(3) a:after {
	background: #0077b5;
}

ul li:hover:nth-child(4) a {
	background: #e4405f;
}

ul li:hover:nth-child(4) a:before {
	background: #d81c3f;
}

ul li:hover:nth-child(4) a:after {
	background: #e46880;
}

3 Comments

  1. […] This css effects Author name is Abubaker Saeed. I got this code from codepen and I am just changing some code and publish on my csspoints website. My previous tutorial you can check also how to create Social Icon on hover 3d CSS Effects. […]

  2. I every time used to study paragraph in news papers but now as I am a user of web so from now I am using net for articles, thanks to web.|

  3. magnificent post, very informative. I wonder why the other experts of this sector don’t notice this. You should continue your writing. I am confident, you’ve a great readers’ base already!

Leave a Reply