Social Btn

Style 1

                
<div class="social-search-area">
    <div class="social-icon socile-icon-style-1 mr-10">
        <ul>
            <li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a> </li>
            <li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a> </li>
            <li> <a href="#" title="dribble"><i class="fa fa-dribbble"></i></a></li>
            <li> <a href="#" title="behance"><i class="fa fa-behance"></i></a> </li>
            <li> <a href="#" title="rss"><i class="fa fa-rss"></i></a> </li>
        </ul>
    </div>
</div>

                
.social-icon ul { margin: 0; padding: 0; }
.social-icon ul li {
float: left;
list-style: outside none none;
margin-right: 10px;
}
.social-icon ul li a {
background: #242628 none repeat scroll 0 0;
border: 1px solid #4d535b;
color: rgba(255, 255, 255, 0.39);
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.social-icon ul li a:hover {
background: #4d535b none repeat scroll 0 0;  
color: #fff;
}
.social-icon.socile-icon-style-1 ul li {
margin-right: 0;
}
.social-icon.socile-icon-style-1 ul li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: #9a9fa9;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 13px;
width: auto;
}
.social-icon.socile-icon-style-1 ul li a:hover {
color: #2695EC;
}

Style 2

                
<div class="social-icon socile-icon-tooltip social-icon-blog text-center">
    <ul>
        <li><a href="#" data-tooltip="facebook"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#" data-tooltip="twitter"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#" data-tooltip="dribble"><i class="fa fa-dribbble"></i> </a></li>
        <li><a href="#" data-tooltip="Google-plus"><i class="fa fa-google-plus"></i>
            </a></li>
        <li><a href="#" data-tooltip="Instagram"><i class="fa fa-instagram"></i> </a></li>
    </ul>
</div>

                
.social-icon ul { margin: 0; padding: 0; }
.social-icon ul li {
  float: left;
  list-style: outside none none;
  margin-right: 10px;
}
.social-icon ul li a {
  background: #242628 none repeat scroll 0 0;
  border: 1px solid #4d535b;
  color: rgba(255, 255, 255, 0.39);
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}
.social-icon ul li a:hover {
  background: #4d535b none repeat scroll 0 0;  
  color: #fff;
}
.social-icon.socile-icon-style-1 ul li {
  margin-right: 0;
}
.social-icon.socile-icon-style-1 ul li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  border-radius: 0;
  color: #9a9fa9;
  height: 45px;
  line-height: 45px;
  margin: 0;
  padding: 0 13px;
  width: auto;
}
.social-icon.socile-icon-style-1 ul li a:hover {
  color: #2695EC;
}
.social-icon-blog ul li {
	margin:0
}
.social-icon-blog ul li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #000;
    height: auto;
    line-height: 25px;
    padding: 0 10px;
    width: auto;
}
.social-icon-blog ul li a:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #2393ec;
}

Style 3

                
<aside class="single-aside blog-aside-social">
    <div class="social-icon socile-icon-tooltip text-center">
        <ul>
            <li><a href="#" data-tooltip="Facebook" class="facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" data-tooltip="Twitter" class="twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" data-tooltip="Dribble" class="dribble"><i class="fa fa-dribbble"></i>
                </a></li>
            <li><a href="#" data-tooltip="Google-plus" class="g-plus"><i class="fa fa-google-plus"></i>
                </a></li>
            <li><a href="#" data-tooltip="Instagram" class="instargm"><i class="fa fa-instagram"></i>
                </a></li>
        </ul>
    </div>
</aside>

                
.social-icon ul { margin: 0; padding: 0; }
.social-icon ul li {
float: left;
list-style: outside none none;
margin-right: 10px;
}
.social-icon ul li a {
background: #242628 none repeat scroll 0 0;
border: 1px solid #4d535b;
color: rgba(255, 255, 255, 0.39);
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.social-icon ul li a:hover {
background: #4d535b none repeat scroll 0 0;  
color: #fff;
}
.social-icon.socile-icon-style-1 ul li {
margin-right: 0;
}
.social-icon.socile-icon-style-1 ul li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: #9a9fa9;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 13px;
width: auto;
}
.social-icon.socile-icon-style-1 ul li a:hover {
color: #2695EC;
}
.blog-aside-social .social-icon ul li a {
color:#fff;
border-radius:4px
}
.blog-aside-social .social-icon ul li a.facebook {
background: #2b80e0 none repeat scroll 0 0;
border-color: #2b80e0;
}
.blog-aside-social .social-icon ul li a.facebook:hover {
background: #154f90 none repeat scroll 0 0;
border-color: #154f90;
}
.blog-aside-social {
display: block;
float: left;
width: 100%;
}
.blog-aside-social .social-icon ul li {
margin-right: 4px;
}
.blog-aside-social .social-icon ul li a.twitter {
background: #1fb8ff none repeat scroll 0 0;
border-color: #1fb8ff;
}
.blog-aside-social .social-icon ul li a.twitter:hover {
background: #007eb8 none repeat scroll 0 0;
border-color: #007eb8;
}
.blog-aside-social .social-icon ul li a.dribble {
background: #d842a1 none repeat scroll 0 0;
border-color: #d842a1;
}
.blog-aside-social .social-icon ul li a.dribble:hover {
background: #951f6a none repeat scroll 0 0;
border-color: #951f6a;
}
.blog-aside-social .social-icon ul li a.g-plus {
background: #da2c2c none repeat scroll 0 0;
border-color: #da2c2c;
}
.blog-aside-social .social-icon ul li a.g-plus:hover {
background: #881818 none repeat scroll 0 0;
border-color: #881818;
}
.blog-aside-social .social-icon ul li a.instargm {
background: #2595cf none repeat scroll 0 0;
border-color: #2595cf;
}
.blog-aside-social .social-icon ul li a.instargm:hover {
background: #165778 none repeat scroll 0 0;
border-color: #165778;
}

Style 4

                
<div class="widget widget-social">
    <div class="social-icon socile-icon-tooltip text-center">
        <ul>
            <li><a class="facebook" data-tooltip="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a class="twitter" data-tooltip="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a class="dribble" data-tooltip="dribble" href="#"><i class="fa fa-dribbble"></i>
                </a></li>
            <li><a class="g-plus" data-tooltip="Google-plus" href="#"><i class="fa fa-google-plus"></i>
                </a></li>
            <li><a class="instargm" data-tooltip="Instagram" href="#"><i class="fa fa-instagram"></i>
                </a></li>
        </ul>
    </div>
</div>

                
.social-icon ul { margin: 0; padding: 0; }
.social-icon ul li {
float: left;
list-style: outside none none;
margin-right: 10px;
}
.social-icon ul li a {
background: #242628 none repeat scroll 0 0;
border: 1px solid #4d535b;
color: rgba(255, 255, 255, 0.39);
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.social-icon ul li a:hover {
background: #4d535b none repeat scroll 0 0;  
color: #fff;
}
.social-icon.socile-icon-style-1 ul li {
margin-right: 0;
}
.social-icon.socile-icon-style-1 ul li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: #9a9fa9;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 13px;
width: auto;
}
.social-icon.socile-icon-style-1 ul li a:hover {
color: #2695EC;
}
.social-icon ul li .facebook:hover {
background: #314A87;
border-color: #314A87;
}
.social-icon ul li .twitter:hover {
background: #22BBF4;
border-color: #22BBF4;
}
.social-icon ul li .dribble:hover {
background: #D842A1;
border-color: #D842A1;
}
.social-icon ul li .g-plus:hover {
background: #DA2C2C;
border-color: #DA2C2C;
}
.social-icon ul li .instargm:hover {
background: #F3800F;
border-color: #F3800F;
}

Style 5

                
<div class="social-icon social-icon-portfolio socile-icon-tooltip text-center">
    <ul>
        <li><a class="facebook" data-tooltip="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a class="twitter" data-tooltip="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a class="dribble" data-tooltip="Dribble" href="#"><i class="fa fa-dribbble"></i>
            </a></li>
        <li><a class="g-plus" data-tooltip="Google-plus" href="#"><i class="fa fa-google-plus"></i>
            </a></li>
        <li><a class="instargm" data-tooltip="Instagram" href="#"><i class="fa fa-instagram"></i>
            </a></li>
    </ul>
</div>

                
.social-icon-portfolio.socile-icon-tooltip {
float: left;
width: 15%;
}
.social-icon-portfolio.socile-icon-tooltip ul {
text-align:center

}
.social-icon.social-icon-portfolio ul li {
float: none;
margin-bottom: 10px;
}
.social-icon.social-icon-portfolio ul li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid #bababa;
border-radius: 100%;
color: #bababa;
font-size: 18px;
height: 50px;
line-height: 46px;
width: 50px;
margin: auto
}
.social-icon.social-icon-portfolio ul li a:hover{
color:#fff
}

Style 6

                
<div class="blog-aside-social">
    <div class="social-icon single-blog-social socile-icon-tooltip text-center">
        <ul>
            <li><a href="#" data-tooltip="Facebook" class="facebook"><i class="fa fa-facebook"></i>Facebook</a></li>
            <li><a href="#" data-tooltip="Twitter" class="twitter"><i class="fa fa-twitter"></i>Twitter</a></li>
            <li><a href="#" data-tooltip="pinterest" class="pinterest"><i class="fa fa-pinterest"></i>Pinterest</a></li>
            <li><a href="#" data-tooltip="Google-plus" class="g-plus"><i class="fa fa-google-plus"></i>Google
                    Plus</a></li>
            <li><a href="#" data-tooltip="linkdin" class="linkdin"><i class="fa fa-linkedin"></i>
                    Linked In</a></li>
        </ul>
    </div>
</div>

                
.blog-aside-social .social-icon ul li a.pinterest {
  background: #cb2027 none repeat scroll 0 0;
  border-color: #cb2027;
}
.blog-aside-social .social-icon ul li a.pinterest:hover {
  background: #9f191f none repeat scroll 0 0;
  border-color: #9f191f;
}
.blog-aside-social .social-icon ul li a.linkdin {
  background: #0097bd  none repeat scroll 0 0;
  border-color: #0097bd ;
}
.blog-aside-social .social-icon ul li a.linkdin:hover {
  background: #006e8a  none repeat scroll 0 0;
  border-color: #006e8a;
}
.social-icon.single-blog-social ul li a {
  border-radius: 0;
  width: 150px;
}
.single-blog-social li a i {
  padding-right: 5px;
}
.social-icon.single-blog-social {
  float: left;
  margin: 35px 0 60px;
  width: 100%;
}