Currently, I am utilizing Bootstrap 5 to develop a website. One of the pages features a header that consists of an image with text and a button overlay. The intended functionality is for users to be redirected to another site when clicking on the button. However, the current issue is that clicking anywhere on the image also triggers the redirect.
body {
background: hsl(233, 47%, 96%);
font-family: 'Montserrat', sans-serif;
}
#copyright {
border-top: 1px solid hsl(0, 0%, 20%);
}
.c-item {
height: 900px;
}
.c-img {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
#team-img {
height: 100%;
object-fit: cover;
}
.dropdown:hover .dropdown-menu {
display: block;
background-color: hsl(196, 66%, 82%);
}
.dropdown-item:hover {
background-color: hsl(198, 100%, 43%);
}
#button {
background-color:hsl(208, 96%, 29%);
border: 1px solid hsl(208, 96%, 29%);
}
#button:hover {
background-color:hsl(198, 100%, 43%);
border: 1px solid hsl(198, 100%, 43%);
}
#caption-h2 {
text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
padding:1rem;
}
#caption-p {
color: hsl(208, 96%, 29%);
}<!-- SHOWCASE START -->
<section>
<div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="./images/about001.jpg" class="d-block w-100 c-img" alt="...">
<div class="carousel-caption mt-3 top-0 ">
<p class=" dtext-uppercase text-center" id="caption-p">We Are</p>
<h2 class="display-3 fw-bolder text-capitalize" id="caption-h2">Project Name</h2>
<div>
<a href="link">
<button class="btn btn-primary px-4 py-2 fs-5 mb-5" id="button">Book a Call</button>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- SHOWCASE CLOSE -->