ERROR: href Attribute is not working in HTML <A> TAG

Question

href attribute is not working in the code mentioned below:

<section class="loginform" style="min-width: 600px; width: 70%; margin: 40px auto;">
<fieldset style="border-radius: 5px; padding: 5px;">
<legend>AA</legend> 
<label> <br> </label>
<style>
.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-gradient(radial, 50% 120%, 0, 50% 120%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(80%, #055194), color-stop(100%, #37526a));
  background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: -moz-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: -o-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  cursor:pointer;
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 0px, 0, 50% 0px, 58, color-stop(0%, #ffffff), color-stop(58%, rgba(255, 255, 255, 0)));
  background: -webkit-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: -moz-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: -o-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}

.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-26px);
-moz-transform: rotateX(90deg) translateZ(-26px);
-ms-transform: rotateX(90deg) translateZ(-26px);
-o-transform: rotateX(90deg) translateZ(-26px);
transform: rotateX(90deg) translateZ(-26px);
z-index: -1;
}
.stage {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -ms-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
</style>

<ul> 
<li>
<section class="stage">
  <figure class="ball"><span class="shadow"></span><div style="line-height:45px; color:#00FFFF; text-align:center; font-size:16px;">
    1</div></figure>
</section> </li>

<li>
<section class="stage">
  <figure class="ball"><span class="shadow"></span><div style="line-height:45px; color:#FFFF00; text-align:center; font-size:16px;">
   <a href="http://www.test.com/aaa.php"> Test</a>
</div></figure>
</section> </li>
</ul>
    </fieldset> </section>
</section>

Can you please help me to resolve this error? Please note: Here , if I click on Test ; web page is not navigating click event to desired destination.

Answer 1

The problem occurs because of your :before block:

.ball:before {
  position: absolute;
}

Being positioned as absolute its position becomes over the link and then obviously the link does not work.

To prevent that you can also make your div with the link positioned as absolute (you should also 'play' with z-index to make all that work (or just to ommit the one for ':before' element at all).

<div style="position:absolute; z-index:3;line-height:45px; color:#FFFF00; text-align:center; font-size:16px;">
   <a href="http://www.test.com/aaa.php"> Test</a>
</div>