Why a button doesn't work in any layer of CSS?

Question

I'm having a hard time understanding why a button doesn't work within the styles of a hero image. I've tried adding a z-index to bring it to the top, but nothing is making sense why this button is being blocked.

I've tried putting this button within one of the other elements, and nothing seems to be allowing the button to work.

#hero {
	background-image: url('https://picsum.photos/1900/1000');
	background-size: cover;
	background-position: top center;
	position: relative;
	top: 0;
	bottom: 0;
	height: 85vh;
	z-index: -10;
}

#hero-overlay {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: -5;
}

#hero-title {
	text-align: center;
	position: relative;
	text-transform: uppercase;
}


h1, #impact, #through, #diversity {
	font-weight: 700;
	line-height: .5;
}

#hero-subtitle ul {
	margin: 1.5rem 0;
}


@media (min-width: 320px) {
	h1#impact {
		color: #ffffff;
		font-size: 3em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 3.5em;
		
		/* Fix for Safari */
		-khtml-opacity: 0.36;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 3em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: block;
	}

	#hero-subtitle ul {
		padding: 0;
	}
	
	h1.display-4 {
		font-size: 1.5em;
	}
	
}

@media (min-width: 360px) {
	h1#impact {
		color: #ffffff;
		font-size: 3.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 4em;
		
		/* Fix for Safari */
		-khtml-opacity: 0.36;		
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 3.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: block;
	}

	#hero-subtitle ul {
		padding: 0;
	}
}


@media (min-width: 480px) {
	h1#impact {
		color: #ffffff;
		font-size: 4.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 4.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}
}

@media (min-width: 640px) {
	h1#impact {
		color: #ffffff;
		font-size: 5.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 6.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 5.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}
	
	#hero-title {
		margin-top: 3em;	
	}	
}

@media (min-width: 768px) {
	h1#impact {
		color: #ffffff;
		font-size: 6.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 7.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 6.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
		font-size: 1.3em;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}

	#hero-title {
		margin-top: 3em;	
	}
	
	h1.display-4 {
		font-size: 2em;
	}	
}


@media (min-width: 992px) {
	h1#impact {
		color: #ffffff;
		font-size: 8em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 9.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 8em;
	}

	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
		font-size: 1.5em;
	}

	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	
	
}

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-top {
  z-index: 1000!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<!-- HTML here -->
<main role="main">
  <div id="hero">
    <div id="hero-overlay"></div>
    <div class="center" id="hero-title">
      <h1 id="impact">Title 1</h1>
      <h1 id="through">Title 2</h1>
      <h1 id="diversity">Title 3</h1>
      <div id="hero-subtitle">
        <ul>
          <li>Conference Name</li>
          <li>February 27-March 1</li>
          <li>City, ST</li>
        </ul>
      </div>
      <a class="btn btn-lg btn-primary btn-top" href="#">Register</a>
    </div>
  </div> 
</main>

Answer 1

Your #hero element has a z-index: -10;, effectively placing it under the page, and the button becomes unresponsive. Setting it to zero fixes that.