Call us Today +91 9999866662
hexagonal social icons by flamingo infotech

If you want to make your website design look good and make it attractive, Then add hexagonal social media icons to your website design. Flamingo Infotech provides complete code for hexagonal social media icons. Get the complete code below

HTML CODE FOR HEXAGONAL SOCIAL MEDIA ICONS ON INDEX PAGE :

Add this code to the HTML file because it will create the social media icons

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Hexagon Shape Social Media Icon</title>
<link rel=”stylesheet” href=”style.css”>
<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” >
</head>
<body>
<ul>
<li><a href=”#”><i class=”fa fa-facebook” aria-hidden=”true”></i></a></li>
<li><a href=”#”><i class=”fa fa-twitter” aria-hidden=”true”></i></a></li>
<li><a href=”#”><i class=”fa fa-google-plus” aria-hidden=”true”></i></a></li>
<li><a href=”#”><i class=”fa fa-linkedin” aria-hidden=”true”></i></a></li>
<li><a href=”#”><i class=”fa fa-instagram” aria-hidden=”true”></i></a></li>
</ul>
</body>
</html>

CSS CODE FOR HTML:

Add this code to style.css because it will give good look to social media icons.

body{
margin:0;
padding: 0;
background: #fff;
}
ul{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
display: flex;
}
ul li{
list-style: none;
position: relative;
margin: 0 10px;
}
ul li a{
width: 70px;
height: 40px;
background: #fff;
display: block;
text-align: center;
line-height: 40px;
font-size: 36px;
transition: -5%;
color:#fff;
}
ul li a:hover{
transform: translateY(-20px);
}
ul li a:before {
content:”;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: #fff;
z-index: -1;
transform: rotate(60deg);
}
ul li a:after {
content:”;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: #fff;
z-index: -1;
transform: rotate(-60deg);
}
ul li:nth-child(1) a,
ul li:nth-child(1) a:before,
ul li:nth-child(1) a:after
{
background: #3b5998;
}
ul li:nth-child(2) a,
ul li:nth-child(2) a:before,
ul li:nth-child(2) a:after
{
background: #00aced;
}
ul li:nth-child(3) a,
ul li:nth-child(3) a:before,
ul li:nth-child(3) a:after
{
background: #dd4b39;
}
ul li:nth-child(4) a,
ul li:nth-child(4) a:before,
ul li:nth-child(4) a:after
{
background: #007bb6;
}
ul li:nth-child(5) a,
ul li:nth-child(5) a:before,
ul li:nth-child(5) a:after
{
background: #bc2a8d;
}

Call Now Button
WhatsApp chat