Social icons with hover effect

      No Comments on Social icons with hover effect

Social icons with hover effect – simple icon hover effect in CSS

Social icons with hover effect

Social icons with hover effect

Markup:

 <ul class="social-icons nav navbar-nav">
        <li>
       <a href="http://facebook.com" rel="nofollow" target="_blank">
      <i class="fa fa-facebook"></i>
             </a>
      </li><li>
   <a href="http://google.com" rel="nofollow" target="_blank">
   <i class="fa fa-google-plus"></i>
   </a> </li> <li>
      <a href="http://twitter.com" rel="nofollow" target="_blank">
    <i class="fa fa-twitter"></i>
        </a> </li> <li>
 <a href="http://vk.com" rel="nofollow" target="_blank">
      <i class="fa fa-vk"></i> </a>
     </li> <li>
     <a href="http://instagram.com" rel="nofollow" target="_blank">
      <i class="fa fa-instagram"></i>
    </a> </li>
    </ul>

CSS:

body{padding:1% 30%}
.social-icons {
	text-align: right;
	margin: 0;
}
.social-icons li a {
	border: 0 none;
	border-radius: 0;
	color: #5f6680;
	padding:0px;
  font-size:22px;
}
.social-icons li{
	display:inline-block;
}
.social-icons li a i {
	padding: 11px 15px;
	margin-bottom: -1px;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}
.social-icons li a i:hover{
	color: #fff;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}
.social-icons .fa-facebook:hover {
	background: #0083C9;
}
.social-icons .fa-twitter:hover  {
	background:#5BBCEC;
}
.social-icons .fa-linkedin:hover  {
	background:#FF4518;
}
.social-icons .fa-dribbble:hover  {
	background:#90C9DC;
}
.social-icons .fa-google-plus:hover  {
	background:#CE3C2D;
}
.social-icons .fa-instagram:hover  {
	background:#b4307d;
}
.social-icons .fa-vk:hover  {
	background:#4c75a3;
}

Demo:

See the Pen Social icons effect on hover by scanfcode (@scanfcode) on CodePen.

Summary
Social icons with hover effect
Article Name
Social icons with hover effect
Description
Social icons with hover effect - icons with amazing hover effects built in CSS, these icons have different colors on hover
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

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