<div class="share">
  <a href="https://facebook.com" target="_blank" class="fb">Facebook</a>
  <a href="https://twitter.com" target="_blank" class="tw">Twitter</a>
</div>

body{
  margin: 0;
  padding: 0;
  background: #eee;
  font-family: "Arial";
}

.share{
  width: 200px;
  height: 200px;
  margin: 5em auto;
  background: #fff;
  text-align: center;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.share a{
  display: inline-block;
  width: 100px;
  height: 200px;
  float: left;
  position: relative;
  text-indent: -9999px;
  z-index: 9999;
}

.share:after{
  content: "Share";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  font-size: 25px;
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  color: #333; 
}

.share a.fb{
  background: #3c5b9b url(https://cdn1.iconfinder.com/data/icons/social-media-icons-2/83/facebook_64x83.png) no-repeat center;
  top: -200px;
  transition: all 0.3s ease-in-out;
}

.share a.tw{
  background: #28abe1 url(https://cdn1.iconfinder.com/data/icons/social-media-icons-2/83/twitter_64x83.png) no-repeat center;
  bottom: -200px;
  transition: all 0.3s ease-in-out;
}

.share:hover a.fb{
  top: 0;
}

.share:hover a.tw{
  bottom: 0;
}