<a> tag is not working properly

Question

I have an <a> element which is being recognized by the browser because the pointer changes when I put it over the element, and in the down-left corner of the browser appears the URL, but when I click it the browser does not navigate.

Here is the HTML code:

<div class="service-box style2">
  <div class="iconbox-style2">
    <div class="inner">
      <i class="fa fa-circle-o"></i>
    </div>
  </div> 
  <h4>Loren</h4>
  <p>Loren ipsum .-......</p>
  <a href="loren.html" class="button gray">Info</a>
</div> 

And the CSS:

.service-box.style2{border:1px solid #f2f2f2;
                    padding:20px 10px;
                    margin-top:30px;
                    -webkit-box-shadow:0px 2px 0px rgba(252,252,252,1);
                    -moz-box-shadow:0px 2px 0px rgba(252,252,252,1);
                    box-shadow:0px 2px 0px rgba(252,252,252,1);
                    }
.service-box.style2 .iconbox-style2{
                width:60px;
                height:60px;
                text-align:center;
                padding-top:20px;
                font-size:48px;
                margin:-60px auto 20px;
                background:#fff;
                color:#44BFE8; }
.inner{
                padding:20px;
                background:#44BFE8;
                border:1px solid rgba(0,0,0,0.05);}

Any idea? Thank you so much in advance!

Answer 1

What I feel is, the class gray is used for giving disabled state for the buttons. Try using this code instead:

<a href="loren.html" class="button">Info</a>