4.8K
CSS Isometric Social Media Icons
Welcome to you another tutorial of techmidpoint.com. Social media button will be the best way to encourage customers to visit site via social media. This CSS isometric social Media icons allows the users to approach the customers easily.
The grey background with multiple 3D buttons of social media icons will attract all of visitor’s eyes. In addition, there are shadows on these icons so that the users can stand out their buttons easily.
Just open your favorite text editor and copy the given source code and paste into your text editor and run it. You can also modify it according to your desire.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Isometric Social Media Icons</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul>
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
</ul>
</body>
</html>
CSS
body{
margin:0;
padding:0;
background:#ccc;
}
ul
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
ul li
{
list-style:none;
margin:0 40px;
}
ul li a .fa
{
font-size:50px;
color:#262626;
line-height:80px;
transition:.5s;
}
ul li a
{
position:relative;
display:block;
width:80px;
height:80px;
background:#fff;
text-align:center;
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
transition:.5s;
transition-timing-function: linear;
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;
transition: .5s;
transform: rotate(0deg) skewY(-45deg);
}
ul li a:after
{
content:'';
position:absolute;
bottom:-20px;
left:-10px;
height:20px;
width:100%;
background:#b1b1b1;
transition: .85s;
transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover
{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
box-shadow:-50px 50px 50px rgba(0,0,0,.5);
}
ul li:hover .fa
{
color:#fff;
}
/* facebook */
ul li:hover:nth-child(1) a
{
background: #3b5999;
}
ul li:hover:nth-child(1) a:before
{
background: #2c3e64;
}
ul li:hover:nth-child(1) a:after
{
background: #516aa5;
}
/* twitter */
ul li:hover:nth-child(2) a
{
background: #0084ff;
}
ul li:hover:nth-child(2) a:before
{
background: #145dc6;
}
ul li:hover:nth-child(2) a:after
{
background: #1170f9;
}
/* youtube */
ul li:hover:nth-child(3) a
{
background: #cd201f;
}
ul li:hover:nth-child(3) a:before
{
background: #930504;
}
ul li:hover:nth-child(3) a:after
{
background: #e62c2a;
}
/* tumblr */
ul li:hover:nth-child(4) a
{
background: #34465d;
}
ul li:hover:nth-child(4) a:before
{
background: #253244;
}
ul li:hover:nth-child(4) a:after
{
background: #40536b;
}
/* skype */
ul li:hover:nth-child(5) a
{
background: #00AFF0;
}
ul li:hover:nth-child(5) a:before
{
background: #166e9b;
}
ul li:hover:nth-child(5) a:after
{
background: #3c8eb9;
}
For More Tutorials Please Click Here
