<head>
 
  <!-- ############ 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" 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>

body {
  margin: 0;
  padding: 0;
  background-color: #DEDEDE;
}

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  width: 60px;
  height: 60px;
  display: block;
  text-align: center;
  margin: 0 10px;
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .3);
  background: linear-gradient(0deg, #DDDDDD, #FFFFFF);
  transition: .5s;
}

ul li a:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

ul li a .fa {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(0deg, #FFFFFF, #DDDDDD);
  border-radius: 50%;
  line-height: 50px;
  font-size: 24px;
  color: #262626;
  transition: .5s;
}

ul li:nth-child(1) a:hover .fa {
  color: #3B5998;
}
ul li:nth-child(2) a:hover .fa {
  color: #00ACED;
}
ul li:nth-child(3) a:hover .fa {
  color: #DD4B39;
}
ul li:nth-child(4) a:hover .fa {
  color: #007BB6;
}
ul li:nth-child(5) a:hover .fa {
  color: #BC2A8D;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.