How can I prevent the element behind a semi-transparent button from showing?

Question

Consider the following code snippet,

 .border { border: 4px solid rgb(195, 0, 38); } .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>

Expected Result:

Here the disabled button needs to take higher order than the border as like the below image.

Kindly please don't change/add new color in css as these colors are dynamic from backend and hence unable to hard code some color for button to make it look above the border.

How to make the z-index of button to take higher than the border?

Answer 1

I believe that you've asked the wrong question. Your button already overlays the element with the border, but you've decreased opacity such that it shows through.

To remedy this you can place a background on the element behind the button:

 .border { border: 4px solid rgb(195, 0, 38); } .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; display: inline-block; border-radius: 10px; background: #fff; }

 <div class="border"> <div class="info-card"> <h1> Info Section </h1> </div> </div> <div class="order-button"> <button> Order Now </button> </div>

Of course, you could simply use different colors on your button. There doesn't seem to be a benefit to reducing opacity. You say the colors are "dynamic", but they can probably be overridden with CSS.

 .border { border: 4px solid rgb(195, 0, 38); } .info-card { padding-bottom: 20px; } button { background-color: #E17F92; border-color: #ccc; 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>

Answer 2

You just have to position the button relatively and apply a z-index of 1 to it. You may want to change the transparent background for the button. If you don't, you'll still see the border through the button. ;)

 .border { border: 4px solid rgb(195, 0, 38); } .info-card { padding-bottom: 20px; } button { background-color: rgb(195, 0, 38); opacity: 0.5; border-radius: 10px; color: #fff; padding: 5px; } .order-button { position: relative; margin-top: -1.5rem; z-index: 1; }

 <div class="border"> <div class="info-card"> <h1> Info Section </h1> </div> </div> <div class="order-button"> <button> Order Now </button> </div>

Answer 3

Well, you're talking about the z-index , but you didn't use it.

To make sure the button overlaps the border and leaving the structure intact, add this:

Add: position: relative; and z-index: 1; to the button .

Also, you've given the button an opacity of 0.5 . Change that to 1.0 If you leave that as 0.5 , the button appears to be under the border, because the border is visible through the button . Even though the button has a higher z-index .

 .border { border: 4px solid rgb(195, 0, 38); } .info-card { padding-bottom: 20px; } button { position: relative; z-index: 1; background-color: rgb(195, 0, 38); opacity: 1; 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>