Social icon hover animation

What is a social icon hover animation How do you make a social icon hover animation? This script and codes were developed by Brandon Ward on 28 January 2022, Friday.

How do I make an social icon hover animation?
  1. Social icon hover animation Previews
  2. Social icon hover animation HTML Codes
  3. Social icon hover animation CSS Codes
Social icon hover animation Previews

Social icon hover animation HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Social icon hover animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="social-container">
    <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
    </ul>
    <ul class="social-icons">
      <li><a href="#" class="social-square"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="social-square"><i class="fa fa-dribbble"></i></a></li>
      <li><a href="#" class="social-square"><i class="fa fa-github"></i></a></li>
      <li><a href="#" class="social-square"><i class="fa fa-stack-overflow"></i></a></li>
    </ul>
</div>
  
  
</body>
</html>

Social icon hover animation CSS Codes

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
  background-color: rgba(255, 0, 60, 0.05);
}

.social-container {
  width: 400px;
  margin: 40vh auto;
  text-align: center;
}

.social-icons {
  padding: 0;
  list-style: none;
  margin: 1em;
}
.social-icons li {
  display: inline-block;
  margin: 0.15em;
  position: relative;
  font-size: 1.2em;
}
.social-icons i {
  color: #fff;
  position: absolute;
  top: 21px;
  left: 21px;
  transition: all 265ms ease-out;
}
.social-icons a {
  display: inline-block;
}
.social-icons a:before {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  content: " ";
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: block;
  background: linear-gradient(45deg, #ff003c, #c648c8);
  transition: all 265ms ease-out;
}
.social-icons a:hover:before {
  transform: scale(0);
  transition: all 265ms ease-in;
}
.social-icons a:hover i {
  transform: scale(2.2);
  -ms-transform: scale(2.2);
  -webkit-transform: scale(2.2);
  color: #ff003c;
  background: -webkit-linear-gradient(45deg, #ff003c, #c648c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 265ms ease-in;
}
.social-icons a.social-square:before {
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
  border-radius: 10%;
}
.social-icons a.social-square:hover:before {
  transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: scale(-180deg);
  border-radius: 100%;
}
.social-icons a.social-square:hover i {
  transform: scale(1.6);
  -ms-transform: scale(1.6);
  -webkit-transform: scale(1.6);
  color: #fff;
  transform: scale(1.6);
  -webkit-text-fill-color: #fff;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.