<div class="wrapper">

  <div class="social">

    <span>Share your profile</span>

    <div class="social-links">

      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>

      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>

      <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

      <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>

      <a href="#"><i class="fa fa-link" aria-hidden="true"></i></a>

    </div>

  </div>

</div>

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

​

html, body { text-align: center; height: 100%;}

​

body {

  background-color: #f9faff;

  background-image: url(https://i.imgur.com/LlVxfFq.jpg);

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;

}

​

.wrapper {

  display: flex;

  width: 100%;

  height: 100%;

  align-items: center;

}

​

*, div, span { box-sizing: border-box;}

​

// Demo Specific

// 

$blue: #3e82fb;

​

.social {

  display: flex;

  align-items: center;

  position: relative;

  width: 300px;

  height: 70px;

  font-size: 18px;

  font-weight: 700;

  box-shadow: inset 0 0 0 2px #dbe3ea;

  border-radius: 50px;

  color: #9aa9b5;

  background: #fff;

  overflow: hidden;

  margin: auto;

  transition: box-shadow .2s ease-out;

  // Flex Children

  span, div {

    margin: auto;

  }

  // Social Links

  //

  .social-links {

    display: flex;

    align-items: center;

    position: absolute;

    top: 0;

    left: 0;

    background: rgba($blue,0);

    width: 100%;

    height: 100%;

    padding: 0 30px;

    transition: all .25s ease;

    // Links

    //

    a {

      margin: auto;

      background: #fff;

      color: $blue;

      width: 40px;

      height: 40px;

      border-radius: 20px;

      line-height: 40px;

      font-size: 15px;

      transform: translate3d(0,60px,0);

      transition: all .2s;

      &:hover {

        background: lighten($blue,15%);

        color: #fff;

      }

    }

  }

  // Hover 

  &:hover {

     box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba($blue,.2);

    .social-links {

      background: rgba($blue,1);

      // Sequential

      > a {

        animation: elastic .5s ease-out forwards 0s;

        &:nth-child(2) { animation-delay: 0.05s;}

        &:nth-child(3) { animation-delay: 0.1s;}

        &:nth-child(4) { animation-delay: 0.15s;}

        &:nth-child(5) { animation-delay: 0.2s;}

      }

    }

  }

}

​

@keyframes elastic {

  0%   { transform: translate3d(0,60px,0);}

  40%  { transform: translate3d(0,-5px,0);}

  70%  { transform: translate3d(0,5px,0);}

  100% { transform: translate3d(0,0,0);}

}

//

// Twitter: @mattsince87

//