I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below.
Adding overflow: hidden to the toggle-button class allows me to see the full border, but the "shadow" does not extend beyond the border. Using an outline kind of works, but it is removed on click, focus, and other events. Ideally, I would like to stick with using a border if possible.
Edit: I have found that removing z-index: 1 solved the issue when the button is not nested inside a div with a background color.
.background-color {
background-color: red;
height: 250px;
width: 250px;
}
.toggle-button {
padding: 10px 25px;
background-color: transparent;
border: 3px solid #000000;
position: relative;
z-index: 1;
top: 0;
left: 0;
transition: all .2s ease;
}
.toggle-button:hover {
left: 4px;
top: 4px;
}
.toggle-button:after {
background-color: #eeeeee;
width: 100%;
height: 100%;
position: absolute;
left: 6px;
top: 6px;
z-index: -1;
content: "";
box-sizing: content-box;
transition: all .2s ease;
}
.toggle-button:hover:after {
left:0px;
top: 0px;
}<div class="background-color">
<button class="toggle-button">Toggle me</button>
</div>