问题描述
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);
}