how to make a container with holes?-CodePudding

I'm making a tutorial on how to use my app for the first time.

So it looks like a popup about how to use a button

during the tutorial, I want to make the background darker and a circle appears that will circle the button and there is a tutorial text

So, I want to make a container that has circular holes

here's a simple example:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
  </style>
</head>
<body>
  <div >
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
    <div ></div>
  </div>
  <button style="margin:200px;">The Button</button>
</body>

but I want the hole to be in the button

CodePudding user response：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
    button {
      position:relative; /* ::before position absolute relative to this. */
      isolation: isolate; /* contain z-index; */
      overflow: visible; /* cater for circle pseudo element */
      color: white;
      background-color: purple; /* this not seen because ::after used for background colour */
    }
    button::before {
      content: " ";
      position: absolute;
      z-index: -2;
      inset: -4.5em -2.5em;
      /*  .circle code */
      width: 200%;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: white;
    }
     button::after {
     content: " ";
     position: absolute;
     z-index: -1;
     inset: 0;
     background-color: purple;
}
  </style>
</head>
<body>
  <div >
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
    <!--  <div ></div> -->
  </div>
  <button style="margin:200px;">The Button</button>
</body>

CodePudding user response：

Just posting as an alternative solution:

After some experiments, I came up with this new method that actually display a transparent circle instead of one with a white background, hopefully it's closer to the desired behavior of a hole.

This allows other elements beside the button to be seen through, and it also keeps the button interactive so it can accept hover and click effects properly.

Run this snippet to see the result:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      section {
        min-height: 300px;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        font-family: sans-serif;
        background: pink;
      }

      div {
        display: flex;
        background: pink;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
      }

      button {
        padding: 5px;
      }

      .highlight {
        position: relative;
        isolation: isolate;
      }

      .btn-wrap.highlight::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10000px;
        height: 10000px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(0, 0, 0, 0) 1%,
          rgba(0, 0, 0, 0.377) 1.01%
        );
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <section>
      <h3>This button is used to delete your file</h3>
      <div >
        <button>The Button</button>
      </div>
    </section>
  </body>