Nelson se vc corrigir a sintax deixando apenas a tag <a>
ou usando apenas a tag <button>
o elemento fica clicável, pois da forma que vc escreveu o HTML a sintax está inválida. Conforme comentado pelo @hunterxhunter e @MarceloBoni
Leia mais sobre isso nessa resposta para ver o que a tag <a>
aceita dentro dela É aceitável usar tags <h2>, <h3>, <p>, <div> dentro de links/âncoras (<a></a>)?
O correto seria algo como
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
z-index: -22;
}
.heroimg {
position: relative;
background-repeat: no-repeat;
background-image: url(https://unsplash.it/100/100);
background-size: cover;
background-position: center;
height: 100%;
/* z-index: -1; */
}
.herotxt {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#circle {
align-items: flex-start;
text-align: center;
cursor: default;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
margin: 0em;
font: 400 13.3333px Arial;
}
<div class="heroimg">
<div class="herotxt">
<h1>Informática</h1>
<a href="#btn" id="circle">
<i class="fa fa-chevron-down fa-3x"></i>
</a>
</div>
</div>
Vc pode fazer uma gambiarra pegando a classe .heroimg
e tirar o z-index: -1
que assim o elemento vai ficar clicável.
Repare que ao remover isso ele fica novamente clicável.
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.heroimg {
position: relative;
background-repeat: no-repeat;
background-image: url(https://unsplash.it/100/100);
background-size: cover;
background-position: center;
height: 100%;
/* z-index: -1; */
}
.herotxt {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
<div class="heroimg">
<div class="herotxt">
<h1>Informática</h1>
<a href="#btn">
<button id="circle">
<i class="fa fa-chevron-down fa-3x"></i>
</button>
</a>
</div>
</div>
Aqui tem um guia da Mozilla sobre z-index
que pode te ajudar. https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/Understanding_z_index
<a><button></button></a>
<a>
ou<button>
, você estiliza o elemento de acordo com sua necessidade e o evento no caso de<a>
você omite e emula o funcionamento do<button>