Counter

<style>
/* psoft */
.psoft-button{margin:30px auto;width:150px}.psoft-button a{background:-moz-linear-gradient(center top,#7ab040; 0%,#7ab040 100%) repeat scroll 0 0 transparent;color:#fff;display:block;font:12px/30px Helvetica,Verdana,sans-serif;height:35px;text-align:center;text-decoration:none;text-transform:uppercase;width:150px;position:relative;z-index:2;color:#fff;font:15px/35px Helvetica,Verdana,sans-serif;text-decoration:none;text-align:center;text-transform:uppercase;background:#7ab040;background:-moz-linear-gradient(top,#00b7ea 0%,#009ec3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00b7ea),color-stop(100%,#7ab040));background:-webkit-linear-gradient(top,#7ab040 0%,#7ab040 100%);background:-o-linear-gradient(top,#00b7ea 0%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 0%,#009ec3 100%);background:linear-gradient(top,#00b7ea 0%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ab040',endColorstr='#009ec3',GradientType=0)}.psoft-button a,.psoft-button ap{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 8px rgba(0,0,0,0.2);-moz-box-shadow:2px 2px 8px rgba(0,0,0,0.2);box-shadow:2px 2px 8px rgba(0,0,0,0.2)}.psoft-button ap{background:#222;color:#FFF;display:block;font:12px/45px Helvetica,Verdana,sans-serif;height:30px;margin:-35px 0 0 10px;position:absolute;text-align:center;transition:margin .5s ease 0;width:130px;z-index:1;-webkit-transition:margin .5s ease;-moz-transition:margin .5s ease;-o-transition:margin .5s ease;-ms-transition:margin .5s ease;transition:margin .5s ease}.psoft-button:hover .up{margin:-10px 0 0 10px !important}.psoft-button:hover .down{line-height:27px!important;margin:-57px 0 0 10px !important}.psoft-button a:active{background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(36%,#00b7ea),color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:linear-gradient(top,#00b7ea 36%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea',endColorstr='#009ec3',GradientType=0)}.psoft-button:active .up{margin:-15px 0 0 10px !important}.psoft-button:active .down{margin:-60px 0 0 10px !important}
</style>

<script src='https://www.gstatic.com/firebasejs/3.6.4/firebase.js'></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBgIb7h9VwB738ynw1dRy7R0fUbPu2OcNo",
    authDomain: "bloganalyzer-related.firebaseapp.com",
    databaseURL: "https://bloganalyzer-related.firebaseio.com",
    storageBucket: "bloganalyzer-related.appspot.com",
    messagingSenderId: "610337492156"
  };
  firebase.initializeApp(config);
</script>

<div class="psoft-button">
<span class="counterCont" id="soracartd">
      <a href="#"><i aria-hidden="true" class="fa fa-rocket"></i> Demo</a>
      <ap class="up"><span class="counterStat">..</span> Views</ap>
      <ap class="down">Click Here</ap></span></div>

<script type='text/javascript'>
//<![CDATA[

var dCounters = document.querySelectorAll('.counterCont');
  [].forEach.call(dCounters, function(dCounter){
    var el = dCounter.querySelector('a');
    var cId = dCounter.id;
    var dDatabase = firebase.database().ref('dCounter').child(cId);
  
    // get firebase data
    dDatabase.on('value', function(snap){
      var data = snap.val() || 0;
      dCounter.querySelector('span').innerHTML = data;
    });
    
    // set firebase data
    el.addEventListener('click', function(){
      dDatabase.transaction(function(dCount){
        return (dCount || 0) + 1;
      });
    });
  });
//]]>
</script>