ОШИБКА: атрибут href не работает в HTML <A> TAG

Атрибут href не работает в коде, указанном ниже:

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

Не могли бы вы помочь мне решить эту ошибку? Обратите внимание: здесь, если я нажму "Тест"; веб-страница не перемещает событие клика в желаемое место назначения.