Social icons with hover effects

      No Comments on Social icons with hover effects

Social icons with hover effects:


Social icons with hover effects:

HTML:

<span class="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
</span>

CSS:

.social-icons
{
    margin:0px 1%;
}
.social-icons i
{
    color:#000;
    font-size:20px;
    border-radius:100%;
    width:38px;height:30px;text-align: center;
    box-shadow:0px 1px 2px 0px #ccc;padding-top:10px;margin:0px 7px;
}
.fa-facebook:hover
{
 color:#fff;
 background-color:#000099;
}
.fa-twitter:hover
{ 
  color:#fff;
  background-color:#0080ff;
}
.fa-instagram:hover
{ 
  color:#fff;
  background-color:#ff0066;
}

Leave a Reply

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