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.

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

how to create social media icons with hover effects , Learn how to style social media buttons with CSS , html code for social media buttons to website

The post how to create social media icons with hover effects appeared first on csshint - A designer hub.