Link button is not clickable [closed]

Navigation
-3

The problem is that you can not click the button or the icon, how do I resolve this?

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>
    
asked by anonymous 23.07.2018 / 22:22

2 answers

2

Nelson if you correct the syntax by leaving only the <a> tag or by using only the <button> tag the element is clickable, since the way you typed the HTML syntax is invalid. As commented by @hunterxhunter and @MarceloBoni

Read more about this in this response to see what the <a> tag accepts within it It is acceptable to use tags

,

,

,

within links / anchors ()?

The correct one 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 game by taking the class .heroimg and get the z-index: -1 so that the element will be clickable.

Notice that by 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 is a Mozilla guide on z-index that can help you. link

    

23.07.2018 / 22:32
5

Your syntax as commented out is incorrect. You put button inside <a> , which can result in errors.

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

<a href="http://google.com" class="button">Vá para o Google</a>
23.07.2018 / 22:37
Jquery code $ accuses it is not defined [closed] Show text randomly