I'm currently working with Bootstrap, but I'm experiencing an issue with applying the :active state as a background color. It's not showing up, although it is changing the text color. Here is the HTML code:
<button class="btn btn_style">1</button>
<button class="btn btn_style">2</button>
<button class="btn btn_style">3</button>
<button class="btn btn_style">4</button>
<button class="btn btn_style">5</button>
CSS code:
.btn_style {
background-color: hsl(216, 12%, 8%);
color: hsl(217, 12%, 63%);
border-radius: 50%;
height: 3rem;
width: 3rem;
}
.btn_style:hover, .submit_btn {
background-color: hsl(25, 97%, 53%);
color: #fff;
}
.btn_style:active {
border: none;
background-color: hsl(217, 12%, 63%);
color: #fff;
}
I want the active state to have:
background-color: hsl(217, 12%, 63%);
color: #fff