click-method on an <a> with transparent borders

by Fiddel

HTML

<div class="wrapper">
    
    
    <a href="https://google.de" class="circle">
        
      <h3>lorem ipsum ipsum dolo res amet nihi ente</h3>     
   
       
    </a>
    
    
  </div>

CSS

div.wrapper {background-color:orange; position:relative;
width:300px;height:300px;border:2px dashed black;display:inline-block;}


div a{ 
border-radius:100%;box-sizing:border-box;
  display:block;
  left:0;top:0;
  width:250px;
  height:250px;
	margin:auto;
  z-index:0;
  padding:50px;
  background: blue;color:#fff;  cursor:pointer;  position: relative;
  top: 50%;
  transform: translateY(-50%);text-align:center;
}
div a:before{
  content:'';position:absolute;box-sizing:border-box;
  display:block;
  z-index:-1;  
  width:270px;
  height:270px;
  border-radius:100%; 
  padding:80px;
  border: 15px solid rgba(255, 255, 255, .3);
  /*(30px padding mehr als parent + 15px border) + (Differenz width und height /2 (hier (280-250)/2 ) */
  top:-55px;
  left:-55px;   cursor:pointer; transform: translate(45px, 45px);
}

div a:hover:before{border: 10px solid rgba(255, 255, 255, .9);
}

JavaScript

$("a.circle").click (function() {
      //$( "#target" ).click();
      event.preventDefault();
      alert("test");
    });