Css how to Html

how to create social media icons with hover effects

social-icons hover effects
Written by csshint

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 🙂

About the author

csshint

csshint is a web design and development blog that was originally created in 2016. we publishes articles and tutorials about the latest web trends, techniques. our team always dedicated to provide useful, inspiring and innovative content that is free of charge. you can follow us on:

Facebook and
twitter

Leave a Comment