title: How to have a download counter attached to my HTML download button?
body: <p>I am a novice designer who could just use HTML to design my own website where I have uploaded my emagazine files. This is my planned download page on my website: <a href="http://www.aamaodisha.org/secdownload.html" rel="noreferrer">http://www.aamaodisha.org/secdownload.html</a></p>
  
  <p>As you can see, on this download page, I have placed images of the 6 editions of my e-magazine and have connected download buttons for each edition, so that whenever an user clicks on the download button, that particular file (.RAR file) will start downloading. 
  Like I said, I have designed these buttons in plain HTML and CSS.</p>
  
  <p>What I desire to have is DOWNLOAD COUNTERS for each magazine edition attached to the particualr DOWNLOAD BUTTONS -- meaning like you can see on my HTML page, the number of downloads to be written below each edition.
  How to have something like that? 
  Can i have that arrangement with html? </p>
  
  <p>The HTML code for the 6 DOWNLOAD BUTTONS:</p>
  
  <pre><code>&lt;div class="button button1"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;7.54 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="button button2"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;7.8 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="button button3"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;7.05 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="button button4"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;3.8 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="button button5"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;7.5 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="button button6"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;8 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AND this is the CSS for the buttons:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I have another doubt : I had searched on Google for download counters and somewhere I had read that instead of directly giving the true path of my magazine file in the href, one should give an alternative path through another php file
  i.e I have at present this HTML code for a download button with Download</p>
  
  <pre><code>&lt;div class="button button1"&gt;
        &lt;a href="#my link"&gt;Download&lt;/a&gt;
        &lt;p class="top"&gt;Click to begin&lt;/p&gt;
        &lt;p class="bottom"&gt;7.54 MB .RAR&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Should I have something like <code>&lt;a href="/download.php file=my link"&gt;Download&lt;/a&gt;</code>?</p>
  
  <p>Please help me implement counters for these download buttons. I shall be highly obliged.
  Thanks. Regards</p>