Broken anchor tag caused by pseudo image background absolute positioning - how to fix?

Question

I'm struggling to figure out why this anchor tag link won't work when I add a background image to tge pesudo element of the div container.

What's causing the link to break is the 'absolute' positioning of the pseudo element for 'contact-me'. But if I remove that, I lose the image. How do I keep the image and get the anchor tag link to work? Any suggestions?

HTML:

<div id="contact-me">

<h2>Contact</h2>

<h3><a class="btn" href = "mailto:email@gmail.com">email@gmail.com</a></h3>

</div>

CSS:

#contact-me {
  background:      background: -webkit-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -o-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -moz-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #790c5a 60%);
  color: #f5f5f5;
  position: relative;
  margin-top: 100px;
  padding-top: 5px;
  padding-bottom: 60px;

}

#contact-me:after {
       content: "";
       background: url("http://www.transparenttextures.com/patterns/cubes.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.9;
       width: 100%;
       height: 100%;
}

.btn {
  cursor: pointer;
  color: #fffafa;
  z-index: 5;
}

Any help would be massively apprciated!

Answer 1

Try, this:

.btn {
  cursor: pointer;
  color: #fffafa;
  z-index: 5;
  position:relative
}