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!
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>