时间戳

首页 > 解决方案 > 按钮中的文字在点击时消失

css - 按钮中的文字在点击时消失

问题描述

在此处输入图像描述因此我设计了一个登录按钮（__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;

标签： cssbutton

解决方案

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

&__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);
}

推荐阅读