how to create social media icons with hover effects

social-icons hover effects

In this post we are going to show how to create a awesome social hover effect with transition effect.
these effects can make your site feel much more attaractive. you can use this effects in your projects.

The structure of markup is very simple and intuitive. Create a container that will have our all the social icons list.

<div class="container">
 <ul class="social-icons">
  <li> <a href="#"><i class="fa fa-facebook"></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-youtube"></i></a></li>
  <li> <a href="#"><i class="fa fa-google"></i></a></li>
 </ul> 
</div>

After creating our markup we’re going to set our style.
We set the general rules for our class and then we are going to add a special class with the desired effect styles.


/*--first include font awesome cdn file in header tag --*/  
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
body{
      background:#504496;
}
.social-icons {
      margin:50px auto;
      padding:0px;
      text-align:center;
      width:100%;
}
.social-icons li {
      Display:inline-block;
      margin:10px;
     }
.social-icons li a {
      color:#fff;
      display:inline-block;
      font-size:25px;
      height:50px;
      width:50px;
      text-decoration:none;
      position:relative;
      margin-bottom:20px;
      font-family:'FontAwesome';
      transition:all 0.5s ease;
     pointer-events:auto;
}
.social-icons li a i {
      line-height:50px;
}
.social-icons li a:hover  {
      color:#3a5ba0;
      background-color:#fff;
      -webkit-border-radius:25px;
      -moz-border-radius:25px;
      border-radius: 25px;
}

And now we’ll look our social icons effects.

social-icons hover effects

I hope that you liked this social icons effects. Thanks and keep visting 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *