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:





9 comments:

  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
  2. This post is really insightful; it has helped me understand so many things. Digital Signature Certificate

    ReplyDelete
  3. Thank you so much for providing such a useful content. Digital Signature Certificate

    ReplyDelete
  4. hi!,I love your writing so a lot! share we communicate extra approximately your post on AOL? I require an expert in this area to resolve my problem. May be that is you! Having a look forward to peer you. canapes catering Singapore

    ReplyDelete
  5. Thanks for sharing such great piece of information with us. Apply Class 3 Digital Signature Certificate

    ReplyDelete
  6. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW