Hide the border line using CSS - html

Question

I am making a section which contains price info section and order now button.
Here, there is a wrapper border class that make the border for the entire section.
Scenario:
In this case consider that button is disabled with opacity and hence it looks like this now.
.border {
border: 4px solid rgb(195, 0, 38);
border-bottom: transparent;
}
.info-card {
padding-bottom: 20px;
}
button {
background-color: rgb(195, 0, 38);
opacity: 0.5;
border-radius: 10px;
color: #fff;
padding: 5px;
}
.order-button {
margin-top: -1.5rem;
}
<div class="border">
<div class="info-card">
<h1> Info Section </h1>
</div>
</div>
<div class="order-button">
<button>
Order Now
</button>
</div>
But the requirement is that the border line should go behind the button (and not above the button) as like the below image.
Expected Result:
Note: Here opacity is included to make the button look like disabled.
Also the color given above varies and so please don't include any other addition of colors.
Tried with increasing z-index of button but that doesn't work in this case.

Answer 1

Try this:
button::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
border-radius: 20px;
background-color: rgba(197, 218, 227,.5);
top: 0;
z-index: 9999;
}
button {
background-color: rgb(197, 218, 227);
border-radius: 37px;
color: #fff;
padding: 12px 5px;
display: block;
width: calc(100% + 4px);
margin-left: -2px;
margin-right: -2px;
border: unset;
cursor: pointer;
position: relative;
}