“父”元素的边框落后于 :after-element

Question

我正在创建一个带有按钮形状阴影的透明轮廓按钮。问题是按钮的边框位于:after 元素的后面。见下文。

如果我将overflow: hidden 添加到切换按钮类，我可以看到完整的边框，但“阴影”不会超出边框。大纲确实有点用，但在点击、聚焦等事件时会被删除。因此，如果可能的话，我想使用边框。

编辑：我删除了z-index: 1，当按钮没有嵌套在 div 内（带有背景色）时它可以工作。

.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>

Answer 1

首先您需要在 css 中定义通用 * {box-sizing: border-box;} 并使用 CSS Pseudo Elements ::before & ::after 进行动画效果并解决 z-index 和重叠问题。

box-sizing 属性定义了如何计算元素的宽度和高度：它们是否应该包括padding 和borders。

*,*::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>

Answer 2

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>