I'm making a django project and after adding my header when I try adding a clickable button or link to it its unresponsive. I've pasted other buttons that i have on my site onto header and it seems something wrong is with my code for my header or i'm not adding something. My navbar works perfectly fine.
.header-container {
width: 100%;
height: 900px;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
}
.head-section {
z-index: 1;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 15%;
width: 700px;
}
.head-title {
color: white;
letter-spacing: 3px;
font-size: 50px;
font-family: "Josefin Sans", sans-serif;
}
.btn1 {
border-radius: 50%;
}
.button {
z-index: 1;
padding: 0.5em 10em;
text-decoration: none;
color: white;
border: double 4px white;
border-radius: 3px;
transition: .4s;
cursor: pointer;
}
.button:hover {
background: white;
opacity: 50%;
}
.button {
padding: 0.5em 10em;
text-decoration: none;
color: white;
border: double 4px white;
border-radius: 3px;
transition: .4s;
}<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" muted="muted">
<source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054225/VS20-DotCom-Header.mp4.mp4" type="video/mp4"/>
<source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054238/VS20-DotCom-Header.webmhd.webm" type="video/webm"/>
</video>
</div>
<div class="head-section">
<h2 class="head-title">Ejad worship</h2>
<a href="#" class="button btn1">Get to Know us better!</a>
</div>
</div>
