oNvbPzP

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<div class="social">
    <a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
    <a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    <a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    <a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>

onvbpzp.markdown

oNvbPzP

A Pen by HigherEducation.com on CodePen.

License.

style.css

/* social media buttons */
.social {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.social a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #212121;
  border: 2px solid #212121;
  transition: all 0.2s linear 0s;
}
.social a i {
  position: relative;
  z-index: 3;
  display: inline-block;
  vertical-align: middle;
}
.social a:last-child {
  margin-right: 0px;
}
.social a:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.social a:after {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  top: -110%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background-color: #333;
  border-radius: 50%;
}
.social a:hover {
  color: white;
}
.social a:hover:after {
  top: 5%;
  transition: all 0.2s linear 0s;
}
/* end social media buttons */