-3

O problema é que não possível clicar no botão nem no ícone, como resolvo isso?

Código:

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

7
  • 1
    Pode criar um exemplo verificável para entendermos melhor o problema? Commented 23/07/2018 às 20:25
  • 1
    Acredito piamente que está sintaxe de HTML é inválida! <a><button></button></a> Commented 23/07/2018 às 20:29
  • então qual seria a correta?
    – nelson450
    Commented 23/07/2018 às 20:31
  • Somente <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> Commented 23/07/2018 às 20:32
  • Nelson realmente se vc arrumar a sintax vai ver que a alteração do z-index nem seria necessária. A outra resposta seria a mais correta
    – hugocsl
    Commented 23/07/2018 às 20:51

2 Respostas 2

5

Sua sintaxe como comentada está incorreta. Voce colocou o button dentro do <a>, que pode resultar em erros.

Você pode setar um button como uma class, dai faz sentido deixar dentro de um <a> como você tentou fazer. Veja:

<a href="http://google.com" class="button">Vá para o Google</a>
1
  • Obrigado pelos links
    – nelson450
    Commented 23/07/2018 às 20:54
2

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

3
  • 1
    É verdade, já tentei remover a resposta depois que fiz o teste, porem como ela está aceita não consigo :(
    – hugocsl
    Commented 23/07/2018 às 20:49
  • 1
    @MarceloBoni já comentei na pergunta pra ver se ele muda para a outra resposta
    – hugocsl
    Commented 23/07/2018 às 20:52
  • 1
    @MarceloBoni resposta corrigida e atualizada
    – hugocsl
    Commented 23/07/2018 às 20:58

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .