* {
  margin:0;
  padding:0;
  text-decoration: none;
}


.container {
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
}

.container a {
  display: inline-flex;
  height:40px;
  width:40px;
  background: #ebebeb;
  color: #fff;
  margin:0 6px;
  border-radius: 50%;
  justify-content: center;
  align-items:center;
  transition: 0.1s;
  font-size:20px;
  -webkit-box-shadow: 5px 3px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 3px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 3px 5px 0px rgba(0,0,0,0.75);
}

.container a:nth-child(1) {
  color: #3b5998;
}

.container a:nth-child(2) {
  color: #1da1f2;
}

.container a:nth-child(3) {
  color: #db4437;
}

.container a:nth-child(4) {
  color: #c32aa3;
}

.container a:hover:nth-child(1) {
  color:#fff;
  background: #3b5998;
}

.container a:hover:nth-child(2) {
  color:#fff;
  background: #1da1f2;
}

.container a:hover:nth-child(3) {
  color:#fff;
  background: #db4437;
}

.container a:hover:nth-child(4) {
  color:#fff;
  background: #c32aa3;
}

.container a i {
  transition: 0.4s;
}

.container a {
  transition: 0.4s;
}

.container a:hover {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.container a:hover > i {
  transform:scale(1.4) rotate(360deg);
}