为什么过渡后还会有背景？

Question

我制作了这个按钮，当鼠标悬停时，它会将::before转换为改变按钮的外观。当没有边框时，它工作得很好，但当添加边框时，它会留下一点背景。

​

.submit-button {
        font-size: 16px;
        color: #FFFFFF;
        background-color: red;
        padding: 14px 16px;
        border: 3px solid #FFFFFF;
        transition: color 300ms cubic-bezier(0.3, 1, 0.8, 1);
        border-radius: 24px;
        cursor: pointer;
         position: relative;
        z-index: 1;
        overflow: hidden;
    }

    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #FFFFFF;
        border-radius: 24px;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
    }

    .submit-button:hover::before {
        transform: scaleX(1);
    }

    .log-out-button:hover {
        color: red
    }
    
    div {
      background-color: red
    }

<div><button class="submit-button log-out-button">hello</button></div>

​

Answer 1

外观略有不同，但你可以简化你的样式，并解决你的边框半径问题，依赖于overflow: hidden样式，并让你的转换的背景颜色填充形状的空间(本质上是落在边框后面)。

​

.submit-button {
        font-size: 16px;
        color: #FFFFFF;
        background-color: red;
        padding: 14px 16px;
        border: 3px solid #FFFFFF;
        border-radius: 24px;
        cursor: pointer;
        position: relative;
        z-index: 1;
        overflow: hidden;
        margin: 4px;
    }

    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
    }

    .submit-button:hover::before {
        transform: scaleX(1);
    }

    .log-out-button:hover {
        color: red
    }
    
    div {
      background-color: red
    }

<div><button class="submit-button log-out-button">hello</button></div>

​