Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Tuesday, February 6, 2018

Spinning Icons Using HTML, CSS and BOOTSTRAP

<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#98111D;
}
.social-network a.icoTwitter:hover {
background-color:#60BD30;
}
.social-network a.icoGoogle:hover {
background-color:#FF0C1E;
}
.social-network a.icoVimeo:hover {
background-color:#351FB8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;  
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
a {
background-color: #D3D3D3;
}
</style>
</head>
<body>
<div class="col-md-12">
<ul class="social-network social-circle" >
<li><a href="http://www.phpjavascript.com/" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</body>
</html>

Note:  Browser version that fully supports the property.
       property--transition
      -webkit-google chrome
      -moz-mozilla firefox
      -o-opera

Output:





1 comment:

  1. Hey There. I found your blog using msn. This is a very well written article. I will make sure to bookmark it and return to read more of your useful info. Thanks for the post. I will definitely comeback.content

    ReplyDelete

More Posts

FOLLOW