Why is button element unaffected by CSS? - css

Question

I have a problem with styling a button element. Here is the sample:
$clrWhite: #fff;
$clrPrimary: #3c9494;
.khanbank__button {
display: block;
height: 50px;
border: none;
color: $clrWhite;
cursor: pointer;
&--primary {
background: $clrPrimary;
&:hover {
background: darken($clrPrimary, 5%);
}
}
}
Here is the what i've tried:
Test

Answer 1

I see you are using BEM
The issue is on your HTML, as you need to have both classes applied to the element
<button class="khanbank__button khanbank__button--primary">Test</button>

Answer 2

From your Codepen, you wrote:
<button class="khanbank__button--primary">Test</button>
However, if I were to translate your SCSS into normal CSS, it would become:
:root {
--clrWhite: #fff;
--clrPrimary: #3c9494;
--clrPrimaryDarken: #358282;
}
.khanbank__button {
display: block;
height: 50px;
border: none;
color: var(--clrWhite);
cursor: pointer;
}
.khanbank__button--primary {
background: var(--clrPrimary);
}
.khanbank__button--primary:hover {
background: var(--clrPrimaryDarken);
}
<button class="khanbank__button--primary">Test</button>
Perhaps now you could see the problem.
In your HTML you have only applied .khanbank__button--primary to <button>. You need to also apply the base class .khanbank__button to it.
In short, your HTML should be:
<button class="khanbank__button khanbank__button--primary">Test</button>
See this pen for working example.