<div class="container">
  <ul class="submenu">
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  </ul>
</div>
body{
  background-color: #ccc;
}
.container{
  text-align:center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  max-height:80px;
}

ul.submenu{
  background-color: #212121;
  border-radius:5px;
  display:inline-block;
  padding:4px 10px;
  margin:0;
  overflow:hidden;
  li{
    display:inline-block;
    a{
      i.fa{
        padding:10px;
        display:inline-block;
        border:1px solid transparent;
        color:#ccc;
        height:30px;
        width:30px;
        border-radius:50px;
        margin:10px;
        text-align:center;
        line-height:30px;
        position: relative;
        z-index:2;
        &::after{
          content:"";
          height:0%;
          width:0%;
          position: absolute;
          top: -500%;
          bottom: -500%;
          left: -500%;
          right: -500%;
          margin:auto;
          border:0px solid transparent;
          border-radius:200px;
          opacity: 0;
          z-index:-1;
          transition:all ease 0.5s;
        }
      }
      &:hover{
        i.fa::before{
          color:#fff;
        }
        i.fa-facebook::after{
          height:200%;
          width:200%;
          background-color: rgb(59,89,152);
          border-radius:0px;
          opacity:1;
        }
        
        i.fa-twitter::after{
          height:200%;
          width:200%;
          background-color: rgb(29,202,255);
          border-radius:0px;
          opacity:1;
        }
        i.fa-google-plus::after{
          height:200%;
          width:200%;
          background-color: rgb(211,72,54);
          border-radius:0px;
          opacity:1;
        }
        i.fa-instagram::after{
          height:200%;
          width:200%;
          background-color: rgb(138,58,185);
          border-radius:0px;
          opacity:1;
        }
      }
    }
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.