I'm creating a transparent outlined button with a shadow in the shape of the button. The problem is that the border of the button gets behind the :after element. See below.

If I add overflow: hidden to the toggle-button class, I can see the full border, but the "shadow" doesn't go outside the border. An outline does kinda work, but it gets removed on onclick, focus etc events. So if it's possible, I would like to use a border.

Edit: I removed the z-index: 1 and it worked 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

div {
    background: red;
    position: relative;
    z-index: 0;
    padding: 20px;
}
.toggle-button {
    padding: 10px 25px;
    background-color: transparent;
    border: 3px solid #000000;
    position: relative;
    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>
<button class="toggle-button">Toggle me</button>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1st you need to define universal * {box-sizing: border-box;} in css and use CSS Pseudo Elements ::before & ::after for animation effecting and solved z-index & overlapping issues.

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

*,*::before,*::after{
    box-sizing: border-box;
}
.background-color {
    background-color: red;
    height: 250px;
    width: 250px;
    position: relative;
}
.toggle-button {
    padding: 14px 30px;
    border: 3px solid transparent;
    background-color: transparent;
    position: relative;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 1;
    transition: all .2s ease;
    left: 3px;
    top: 3px;
    z-index: 0;
    cursor: pointer;
}
.toggle-button:hover {
    left: 6px;
    top: 6px;
}
.toggle-button::before {
    content: "";
    background-color: transparent;      
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    border: 3px solid #000000;
}
.toggle-button::after {
    background-color: #eeeeee;      
    width: 100%;
    height: 100%;
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: -1;
    content: "";
    transition: all .2s ease;
}
.toggle-button:hover:after {
    left:0px;
    top: 0px;
}

<div class="background-color">
    <button class="toggle-button">Toggle me</button>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>