Css overlay for focusing on button - css

Question

Is there a way in css to create and overlay with opacity 0.5
And create a class that when applied will somehow affect the overlay so the final result will look something like this?
What I am looking for a way that the class would affect the overlay.

Answer 1

I don't know how the rest of your page looks like, but you can use a pseudo-element (to get an offset) with box-shadow to punch a hole around an element, simply by adding a class to the element you want to highlight. Needs some fine adjustment, if you got other shapes than rectangles.
div {
box-shadow: 0px 0px 10px 1px lightgrey;
border-radius: 1rem;
padding: 1rem;
}
button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 1rem;
cursor: pointer;
}
.highlight {
position: relative;
}
.highlight::before {
--white-area: -25px;
content: '';
position: absolute;
left: var(--white-area);
right: var(--white-area);
top: var(--white-area);
bottom: var(--white-area);
box-shadow:
inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5),
0px 0px 0px 9999px rgba(0, 0, 0, 0.3);
pointer-events: none;
border-radius: 2rem;
}
<div>
<h3>Don't Have an Account?</h3>
<button class="highlight">Create Your Account</button>
</div>

Answer 2

You can easily create an overlay with css. But AFAIK there is no way to "punch a hole" into that overlay. But you might put your button above the overlay and give it a (in this case white) shadow. So you would have to apply a class to the button rather than to the overlay.
EDIT:
As Simon shows, there IS a way to make a hole - but there would be a severe issue: How do you find the position above your button in a responsive design?
I still would recommend putting the button ABOVE the overlay.

Answer 3

A way is to create an overlay, and put the button on top of it, using z-index.
button{
background-color: #3499eb;
padding: 10px;
position: relative;
z-index: 999;
color: #fff;
}
.overlay{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color: black;
opacity: 0.5;
}
<div class="overlay"></div>
<button>Click here </button>