Как прикрепить счетчик загрузок к моей кнопке загрузки HTML?

Я начинающий дизайнер, который мог бы просто использовать HTML для создания своего собственного веб-сайта, на который я загрузил свои файлы emagazine. Это моя страница запланированной загрузки на моем веб-сайте: http://www.aamaodisha.org/secdownload.html

Как вы можете видеть, на этой странице загрузки я разместил изображения 6 изданий моего электронного журнала и подключил кнопки загрузки для каждого издания, чтобы всякий раз, когда пользователь нажимает кнопку загрузки, запускался этот конкретный файл (файл.RAR). загрузка. Как я уже сказал, я разработал эти кнопки в обычном HTML и CSS.

Что я хотел бы иметь, так это СЧЕТЧИКИ ЗАГРУЗОК для каждого издания журнала, прикрепленные к КНОПКАМ ЗАГРУЗКИ, что означает, как вы можете видеть на моей HTML-странице, количество загрузок, которое должно быть написано под каждым изданием. Как иметь что-то подобное? Могу ли я договориться об этом с html?

HTML-код для 6 КНОПОК ЗАГРУЗКИ:

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>
<div class="button button2">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.8 MB .RAR</p>
</div>
<div class="button button3">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.05 MB .RAR</p>
</div>
<div class="button button4">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">3.8 MB .RAR</p>
</div>
<div class="button button5">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.5 MB .RAR</p>
</div>
<div class="button button6">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">8 MB .RAR</p>
</div>

И это CSS для кнопки:

.button {
  width: 115px;
}

.button1 {
    position:absolute;
    left:430px;
    top:410px;

}    
.button2 {
    position:absolute;
    left:632px;
    top:410px;

}  
.button3 {
    position:absolute;
    left:833px;
    top:410px;

}    
.button4 {
    position:absolute;
    left:430px;
    top:636px;

}    
.button5 {
    position:absolute;
    left:632px;
    top:636px;

}   
.button6 {
    position:absolute;
    left:833px;
    top:636px;

}   
.button a {
  display: block;
  height: 28px;
  width: 115px;

  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 

  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  -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);
}

.button p {
  background: #222;
  display: block;
  height: 25px;
  width: 105px;
  margin: -27px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/28px Helvetica, Verdana, sans-serif;
  color: #ffffff;

  /*POSITION*/
  position: absolute;
  z-index: -1;

  /*TRANSITION*/  
  -webkit-transition: margin 0.4s ease;
     -moz-transition: margin 0.4s ease;
       -o-transition: margin 0.4s ease;
      -ms-transition: margin 0.4s ease;
          transition: margin 0.4s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -4px 0 0 5px;
}

.button:hover .top {
  margin: -50px 0 0 5px;
  line-height: 22px;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -14px 0 0 5px;
}

.button:active .top {
  margin: -30px 0 0 5px;
}

у меня есть еще одно сомнение : я искал в Google для счетчиков скачать и где-то я читал, что вместо того чтобы непосредственно давать истинный путь мой файл журнала в href, следует дать альтернативный путь через другой php файл я.я в настоящее время данный HTML-код для кнопки Скачать с Скачать

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>

Должен ли я иметь что-то вроде <a href="/download.php file=my link">Download</a>?

Пожалуйста, помогите мне реализовать счетчики для этих кнопок загрузки. Я буду вам очень признателен. Спасибо. С уважением