<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="social">
<div class="websure-social minimal">
<div class="websure-social-inner">
<div class="social-img-wrp websure-socialink prk_bordered websure-behance">
<a href="#" target="_blank">
<span class="websure-behance fa fa-behance"></span>
<span class="bg-shifter"><i class="fa fa-behance"></i></span>
</a>
</div>
<div class="social-img-wrp websure-socialink prk_bordered websure-linkedin">
<a href="#" target="_blank">
<span class="websure-linkedin fa fa-linkedin"></span>
<span class="bg-shifter"><i class="fa fa-linkedin"></i></span>
</a>
</div>
<div class="social-img-wrp websure-socialink prk_bordered websure-facebook">
<a href="#" target="_blank">
<span class="websure-facebook fa fa-facebook"></span>
<span class="bg-shifter"><i class="fa fa-facebook"></i></span>
</a>
</div>
<div class="social-img-wrp websure-socialink prk_bordered websure-instagram">
<a href="#" target="_blank">
<span class="websure-instagram fa fa-instagram"></span>
<span class="bg-shifter"><i class="fa fa-instagram"></i></span>
</a>
</div>
<div class="social-img-wrp websure-socialink prk_bordered websure-pinterest">
<a href="#" target="_blank">
<span class="websure-pinterest fa fa-pinterest"></span>
<span class="bg-shifter"><i class="fa fa-pinterest"></i></span>
</a>
</div>
<div class="social-img-wrp websure-socialink prk_bordered websure-google-plus">
<a href="#" target="_blank">
<span class="websure-gplus fa fa-google-plus"></span>
<span class="bg-shifter"><i class="fa fa-google-plus"></i></span>
</a>
</div>
<div class="social-img-wrp websure-socialink prk_bordered websure-twitter">
<a href="#" target="_blank">
<span class="websure-twitter fa fa-twitter"></span>
<span class="bg-shifter"><i class="fa fa-twitter"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
.social li i,.social li a{
font-size: 1.2em;
color: #2a2a2a;
}
.minimal .social-img-wrp{
margin-right:6px;
margin-bottom:6px;
width:30px;
height:30px;
text-align:center;
float:left
}
.minimal a{
width:28px;
height:28px;
line-height:26px;
font-size:16px
}
.bg-shifter i{
color: #fff;
}
.websure-socialink:hover .bg-shifter{
top:0;
-moz-transform:rotate(0);
-ms-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0)
}
.websure-social{
line-height:0;
width:100%
}
.websure-social-inner{
font-size:14px
}
.minimal .social-img-wrp{
margin-right:6px;
margin-bottom:6px;
width:30px;
height:30px;
text-align:center;
float:left
}
.minimal a{
width:35px;
height:35px;
line-height:30px;
font-size:16px
}
.websure-social a{
float:left;
width:100%;
overflow:hidden;
position:relative
}
.websure-socialink{
width:35px;
height:35px;
line-height:25px!important;
position:relative
}
.websure-socialink.websure-behance,.websure-socialink.websure-behance a{
border-color:#0287e5;
color:#0287e5
}
.websure-socialink.websure-behance .bg-shifter{
background-color:#0287e5
}
.websure-socialink.websure-facebook,.websure-socialink.websure-facebook a{
border-color:#1f69b3;
color:#1f69b3
}
.websure-socialink.websure-facebook .bg-shifter{
background-color:#1f69b3
}
.websure-socialink.websure-google-plus,.websure-socialink.websure-google-plus a,.websure-socialink.websure-gplus,.websure-socialink.websure-gplus a{
border-color:#d34836;
color:#d34836
}
.websure-socialink.websure-google-plus .bg-shifter,.websure-socialink.websure-gplus .bg-shifter{
background-color:#d34836;
}
.websure-socialink.websure-instagram,.websure-socialink.websure-instagram a{
border-color:#c41d78;
color:#c41d78;
}
.websure-socialink.websure-instagram .bg-shifter{
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
.websure-socialink.websure-pinterest,.websure-socialink.websure-pinterest a{
border-color:#df2126;
color:#df2126
}
.websure-socialink.websure-pinterest .bg-shifter{
background-color:#df2126
}
.websure-socialink.websure-tumblr,.websure-socialink.websure-tumblr a{
border-color:#374a61;
color:#374a61
}
.websure-socialink.websure-tumblr .bg-shifter{
background-color:#374a61
}
.websure-socialink.websure-twitter,.websure-socialink.websure-twitter a{
border-color:#43b3e5;
color:#43b3e5
}
.websure-socialink.websure-twitter .bg-shifter{
background-color:#43b3e5
}
.websure-socialink.websure-youtube,.websure-socialink.websure-youtube a{
border-color:#fb2d39;
color:#fb2d39
}
.websure-socialink.websure-youtube .bg-shifter{
background-color:#fb2d39
}
.websure-socialink.websure-linkedin,.websure-socialink.websure-linkedin a{
border-color:#1a7696;
color:#1a7696
}
.websure-socialink.websure-linkedin .bg-shifter{
background-color:#1a7696
}
.prk_bordered{
border:1px solid #26272a
}
.bg-shifter{
position:absolute;
top:-60px;
width:50px;
height:49px;
-moz-transition-property:-moz-transform,top;
-o-transition-property:-o-transform,top;
-webkit-transition-property:-webkit-transform,top;
transition-property:transform,top;
-moz-transition-duration:.25s;
-o-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-duration:.25s;
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
z-index:-1
}
#websure-to-top,.popup-close{
position:fixed;
cursor:pointer
}
.websure-socialink .bg-shifter{
top:-30px;
width:30px;
height:28px;
z-index:2;
left:-1px
}
