CSS_Hover

返回：完美CSS | onLine

<div class="middle">
  <a class="btn" href="">
    <i class="fa fa-facebook-f"></i>
  </a>
  <a class="btn" href="">
    <i class="fa fa-twitter"></i>
  </a>
  <a class="btn" href="">
    <i class="fa fa-instagram"></i>
  </a>
  <a class="btn" href="">
    <i class="fa fa-google-plus"></i>
  </a>
</div>

body {
  margin:0;
  padding:0;
  background: #303030;
}

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

.btn {
  display:inline-block;
  width:60px;
  height: 60px;
  background: #f1f1f1;
  margin: 10px;
  border-radius: 30%;
  box-shadow:-5px 5px 15px -5px #f1f1f1;
  overflow: hidden;
  position: relative;
  transition: 0.3s linear;
}

.btn i {
  line-height: 60px;
  font-size: 26px;
  transition: 0.3s linear;
}

.btn:nth-child(1) i {
  color:#3b5998;
}

.btn:nth-child(2) i {
  color:#1da1f2;
}

.btn:nth-child(3) i {
  color:#c32aa3;
}

.btn:nth-child(4) i {
  color:#db4437;
}

.btn:hover {
  transform: scale(1.1);
}

.btn:hover i {
  transform: scale(1.2);
  color: #fff;
}

.btn:before {
  content:"";
  position:absolute;
  width:120%;
  height:120%;
  transform: rotate(45deg);
  left: -110%;
  top:90%;
}

.btn:nth-child(1)::before {
  background: #3b5998;
}

.btn:nth-child(2)::before {
  background: #1da1f2;
}

.btn:nth-child(3)::before {
  background: #c32aa3;
}

.btn:nth-child(4)::before {
  background: #db4437;
}

.btn:hover::before {
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}

@keyframes aaa {
  0% {
    left: -110%;
    top:90%;
  }
  50% {
    left:10%;
    top: -30%;
  }
  100% {
    left: -10%;
    top: -10%;
  }
}