Bootstrap snippet: Social Sharing Buttons with counter

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: social, buttons



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <h4 class="text-center">find more in <a href="http://www.jquery2dotnet.com/" target="__blank">jquery2dotnet</a></h4> <div class="container bootstrap snippet"> <div class="row social"> <div class="col-md-3"> <a href="#"> <div class="panel panel-default twitter"> <div class="panel-body"> <small class="social-title">Twitter</small> <h3 class="count"> 12,000</h3> <i class="fa fa-twitter"></i> </div> </div> </a> </div> <div class="col-md-3"> <a href="#"> <div class="panel panel-default google-plus"> <div class="panel-body"> <small class="social-title">Google+</small> <h3 class="count"> 13,000</h3> <i class="fa fa-google-plus"></i> </div> </div> </a> </div> <div class="col-md-3"> <a href="#"> <div class="panel panel-default facebook-like"> <div class="panel-body"> <small class="social-title">Facebook Like</small> <h3 class="count"> 14,000</h3> <i class="fa fa-facebook"></i> </div> </div> </a> </div> <div class="col-md-3"> <a href="#"> <div class="panel panel-default visitor"> <div class="panel-body"> <small class="social-title">Website Visitor</small> <h3 class="count"> 15,000</h3> <i class="fa fa-user"></i> </div> </div> </a> </div> </div> </div>
body { margin-top:20px; } .social-title {text-transform: uppercase;letter-spacing: 1px; } .count { font-size: 37px;margin-top: 10px;margin-bottom: 10px; } .fa { font-size: 100px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; } .social .panel { color:#fff;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .social a { text-decoration:none; } .twitter { background-color:#00acee; } .google-plus { background-color:#dd4b39; } .facebook-like { background-color:#3b5998; } .visitor { background-color:#eb6d20; }
// Animate the element's value from x to y: $({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, { duration: 3000, easing: 'swing', // can be anything step: function () { // called on every step // Update the element's text with rounded-up value: $('.count').text(commaSeparateNumber(Math.round(this.someValue))); } }); function commaSeparateNumber(val) { while (/(d+)(d{3})/.test(val.toString())) { val = val.toString().replace(/(d)(?=(ddd)+(?!d))/g, "$1,"); } return val; }
Dey-Dey

Social Sharing Buttons with counter

Dey-Dey
  May 2nd 2014, 22:53
2.7K Views