Hyperlink in CSS button not working and leading anywhere

Question

Whenever I click on the button it doesn't lead to the hyperlink, it just go up and down after I click on it. I've tried re-linking or using other links to solve this issue but to no avail. It seems my html code is correct but I could be missing a small error in the code.

This is my code:

.btn {
    background-color:transparent;
    border-radius:28px;
    border:1px solid #702F8A;
    display:inline-block;
    cursor:pointer;
    color:#702F8A;
    font-family:Tahoma;
    font-size:14px;
padding:4px 13px;
    text-decoration:none;
position: absolute;
bottom: 4.5%

}
.btn:hover {
    background-color:#702F8A;
border-color:#702F8A;
}
.btn:active {
    position:relative;
    top:1px;
}
.flex-container {
    display: flex;
    justify-content: center;
}

<section class="px-4 cards_invitations">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Accessories_Collage - Copy 2.png" /></a>
<p class="my-3" style="font-size:18px;">&nbsp;</p>

<div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Accessories <i class="far fa-chevron-right pl-1"></i></a></div>
</div>

<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a href="https://www.example.com/"><img class="img-fluid" src="/images/contentimages/images/Activewear - Copy 1.png" /></a>

<p class="my-3" style="font-size:18px;">&nbsp;</p>

<div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Active Wear <i class="far fa-chevron-right pl-1"></i></a></div>
</div>

<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Bags_Backpacks_ - Copy 1.png" /></a>

<p class="my-3" style="font-size:18px;">&nbsp;</p>

<div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Bags <i class="far fa-chevron-right pl-1"></i></a></div>
</div>

John Doe · Accepted Answer · 2021-04-12T20:26:21.993

Remove the part in your CSS code where you write bottom: 4.5%

What this does is that it puts all elements with that class you made (btn), and puts them all on top of each other. When this happens, the browser doesn’t know where to redirect the user, which is why it was glitching a little as you have said. When you remove this, all the links should be working again.

Also this doesn’t really fix the problem you have, but at the end, you are missing 2 closing div tags and 1 closing section tag.

Full Correct Code:

<style type="text/css">
   .btn {
   background-color:transparent;
   border-radius:28px;
   border:1px solid #702F8A;
   display:inline-block;
   cursor:pointer;
   color:#702F8A;
   font-family:Tahoma;
   font-size:14px;
   padding:4px 13px;
   text-decoration:none;
   position: absolute;
   }
   .btn:hover {
   background-color:#702F8A;
   border-color:#702F8A;
   }
   .btn:active {
   position:relative;
   top:1px;
   }
   .flex-container {
   display: flex;
   justify-content: center;
   }
</style>
<section class="px-4 cards_invitations">
   <div class="container">
      <div class="row">
         <div class="col-12 col-md-6 col-lg-4 py-3 text-center border">
            <a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Accessories_Collage - Copy 2.png" /></a>
            <p class="my-3" style="font-size:18px;">&nbsp;</p>
            <div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Accessories <i class="far fa-chevron-right pl-1"></i></a></div>
         </div>
         <div class="col-12 col-md-6 col-lg-4 py-3 text-center border">
            <a href="https://www.example.com/"><img class="img-fluid" src="/images/contentimages/images/Activewear - Copy 1.png" /></a>
            <p class="my-3" style="font-size:18px;">&nbsp;</p>
            <div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Active Wear <i class="far fa-chevron-right pl-1"></i></a></div>
         </div>
         <div class="col-12 col-md-6 col-lg-4 py-3 text-center border">
            <a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Bags_Backpacks_ - Copy 1.png" /></a>
            <p class="my-3" style="font-size:18px;">&nbsp;</p>
            <div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Bags <i class="far fa-chevron-right pl-1"></i></a></div>
         </div>
      </div>
   </div>
</section>

Hyperlink in CSS button not working and leading anywhere

1 Answers1