I'm making a tutorial on how to use my app for the first time.
So it looks like a popup on how to use the button
In the tutorial I want the background to darken and a circle to appear that will go around the button and have a tutorial text
So, I want to make a container with a round hole
This is 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 class="dark">
<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 class="circle"></div>
</div>
<button style="margin:200px;">The Button</button>
</body>
But I want the hole to be in the button
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
renew
Updated the code example to include overlays by adding the
<main>container withoverflow:hiddenso that the code snippet displays more correctly.Original
Just posted as an alternative solution:
After some experimentation I came up with this new method that actually displays a transparent circle instead of a circle with a white background, hopefully it's closer to the desired behavior of the hole.
This allows other elements next to the button to be seen, and also keeps the button interactive so that it correctly accepts hover and click effects.
Run this code snippet to see the results:
This button is used to delete your file