<div class="social">
  <a href="https://www.facebook.com/vavik96" class="link facebook" target="_parent"><span class="fa fa-facebook"></span></a>
  <a href="https://twitter.com/vavik_96" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
  <a href="https://google.com/+Vavik96com" class="link google-plus" target="_parent"><span class="fa fa-google-plus"></span></a>
  <a href="https://vavik96.tumblr.com" class="link tumblr" target="_parent"><span class="fa fa-tumblr"></span></a>
  <a href="https://vk.com/vavik96" class="link vk" target="_parent"><span class="fa fa-vk"></span></a>
  <a href="https://vavik96.wordpress.com"class="link wordpress" target="_parent"><span class="fa fa-wordpress">W</span></a>
  <a href="https://vavik96.blogspot.com" class="link blogspot" target="_parent"><span class="fa fa-blogspot">B</span></a>
</div>

body {
  background: #222 url("https://img-fotki.yandex.ru/get/15547/49050606.7b/0_120525_83db396b_orig.jpg") no-repeat fixed center;
  background-size: cover;
  overflow: hidden;
}

.social {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px dashed white;
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 20px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.google-plus {
  background-color: tomato;
  color: white;
}

.social .link.twitter {
  background-color: #00ACEE;
  color: white;
}

.social .link.facebook {
  background-color: #3B5998;
  color: white;
}

.social .link.tumblr {
  background-color: #677685;
  color: white;
}

.social .link.vk {
  background-color: #55769B;
  color: white;
}

.social .link.wordpress {
  background-color: #7F9EB9;
  color: white;
}

.social .link.blogspot {
  background-color: #F4833D;
  color: white;
}