Link button is not clickable

Question

The problem is that I cannot click the button or the icon, how do I fix it?

Code:

.heroimg{
 position: relative;
 background-repeat: no-repeat;
 background-image: url('../img/fjords.png');
 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%);
}

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

Answer 1

Your syntax as commented is incorrect. You put the button within the <a>, that can result in mistakes.

You can set a button as a class, it makes sense to leave inside a <a> as you tried to do. See:

<a href="http://google.com" class="button">Vá para o Google</a>

• How to add href in Buttons
• How to create an HTML button that acts as a link?

Answer 2

Nelson if you fix the syntax leaving only the tag <a> or using only the tag <button> the element is clickable because the way you wrote the HTML syntax is invalid. As commented by @hunterxhunter and @Marceloboni

Read more about this in this answer to see what the tag <a> accepted within it It is acceptable to use <H2>, <H3>, <p>, <div> tags within links/anchors (<a></a>)?

The right thing would be something like

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>

---

You can do a trick by taking the class .heroimg and take out the z-index: -1 so the element will be clickable.

Note that when removing this it is again clickable.

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>

Here’s a Mozilla guide on z-index that can help you. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index