单击时按钮中的文本消失

如何解决单击时按钮中的文本消失

enter image description here所以我设计了一个登录按钮 (__signin)，它位于一个容器 (btnContainer) 内，还有一个忘记密码按钮 (__forgotpass)。

发生的事情是点击按钮时登录文本消失了......所以如果我按住按钮保持活动状态，当我松开按钮时文本消失了。

我试过查这个真的找不到太多...我唯一能想到的就是将登录文本与按钮分开，因为现在文本被标记在按钮元素内。那么最好的方法是什么？只是将标志放在跨度和绝对位置内？但我的一部分人认为有一种方法可以保持 html 标记的原样，但我只是不知道。

如果可能的话，我想在没有 javascript 的情况下执行此操作.. 这是按钮的一些 html 和 css

HTML

<div class="btnContainer">
    <button type="submit" class="btnContainer__signin">Sign In</button>
    <button type="submit" class="btnContainer__forgotpass">Forgot Password?</button>
</div>

CSS

    .btnContainer { //This is the container for the sign-in button and forgot password button
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 5rem;
   max-width: 10rem;
   margin-top: auto;

    &__signin {
        color: var(--color-text-primary);
        background: var(--color-btn-background);
        border: .50rem solid var(--color-btn-background);
        border-radius: 2.5rem;
        border-style: outset;
        z-index: 1000;
        cursor: pointer;
        min-width: 10rem;
        text-transform: none;
        transition: transform .5s ease;
        // transition: all .5s ease;
    }

    &__signin:active {
        transform: translateY(2px);
    }

    &__forgotpass {
        cursor: pointer;
        color: var(--color-text-primary);
        border-bottom: var(--line);
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    &__forgotpass
    :hover,:active {
        color: var(--color-text-secondary);
    }
}

 --color-text-primary: #EFEFEF;
 --color-text-secondary: #3EB54A;

 --color-btn-background: #3EB54A;
 --color-btn-hover: #3EB54A;

解决方法

我相信以下选择器在两个按钮处于活动状态时都针对它们。

&__forgotpass
:hover,:active {
    color: var(--color-text-secondary);
}

由于 --color-btn-background 和 --color-text-secondary 相同，因此 btnContainer__signin 的文本似乎丢失了。它没有丢失，它只是与背景颜色相同。

尝试将选择器更改为仅针对 btnContainer__forgotpass 按钮。

&__forgotpass:hover,&__forgotpass:active {
    color: var(--color-text-secondary);
}