Css overlay for focusing on button

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.

Hi, I'm sure you can do that, I don't know how but here is a tool to make it: https://introjs.com/ — halilcakar, Aug 16 '21 at 10:58
Check : https://stackoverflow.com/questions/20242806/hole-in-overlay-with-css — Simon, Aug 16 '21 at 11:06
@halilcakar Are you any familiar with the introjs? Do you know if it would work in typescript anugular? — C0mpl3x, Aug 16 '21 at 11:32
I'm actually not, I just quickly checked only and find out this sorry :/ — halilcakar, Aug 16 '21 at 11:42

score 1 · Accepted Answer · answered Aug 16 '21 at 12:22

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>

Floyd · Answer 2 · 2021-08-16T11:36:12.573

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.

score 0 · Answer 3 · answered Aug 16 '21 at 11:47

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>

Css overlay for focusing on button

3 Answers3