<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="center">
<div id="social-test">
<ul class="social">
<li><a href="https://facebook.com/colorlib"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/colorlib"><i class="fa fa-twitter" aria-hidden="true"></a></i></li>
<li><a href="https://instagram.com/colorlib"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="https://www.youtube.com/c/Colorlib"><i class="fa fa-youtube" aria-hidden="true"></a></i></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></a></i></li>
<li><a href="https://github.com/puikinsh"><i class="fa fa-github" aria-hidden="true"></a></i></li>
</li>
</ul>
<p class="credits">For more awesome social buttons <a href="https://colorlib.com/wp/html-social-buttons-templates/"> click here</a></p>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
body {
background: #3b5998;
width: 100%;
margin: 0 auto;
}
.center {
display: table;
width: 100%;
height: 100vh;
}
#social-test {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 30px;
.social {
padding-left: 0px;
}
li {
display: inline-block;
}
li a {
color: rgba(256, 256, 256, 0.6);
border-radius: 6px;
list-style-type: none;
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
padding: 1%;
border: 1px solid rgba(256, 256, 256, 0.6);
cursor: pointer;
margin-left: 10px;
margin-bottom: 20px;
transition: ease .3s;
&:hover {
color: rgba(256, 256, 256, 1);
border: 1px solid rgba(256, 256, 256, 1);
}
}
}
.social:hover > li {
opacity: 0.5;
}
.social:hover > li:hover {
opacity: 1;
}
.credits, .credits a {
font-size: 20px;
font-family: Open Sans;
color: rgba(256, 256, 256, 0.6);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.