P粉0205562312023-09-03 00:08:32
First of all, when you click the button, you already give it focus, you don't need to dynamically give it focus.
So, why doesn’t the background color change?
Because background-image
has already covered background-color
You only need to set background
instead of background-color
.btn:focus { background: #1ACC8D; }
Complete example, no need JS
.theme-dark-btn {
transition: all ease 1s;
background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
background-size: 300%;
background-position: 0 0;
border: 1px solid #1C4CA3;
font-weight: 600;
letter-spacing: 1px;
}
.theme-dark-btn:hover {
background-position: 100% 0;
border: 1px solid #1ACC8D;
}
.theme-dark-btn:focus {
background-color: #1ACC8D;
}
.theme-dark-btn:active {
background-color: #1ACC8D;
}
.btn {
height: 38px;
line-height: 35px;
text-align: center;
padding: 0 18px;
text-transform: uppercase;
transition: background-image .3s linear;
transition: box-shadow .3s linear;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 12px !important;
}
.btn:focus {
background: #1ACC8D;
}
<div class="col">
<button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" autofocus>1 Year</button>
<button class="btn theme-dark-btn" style="color: white" id="5Year">5 Years</button>
<button class="btn theme-dark-btn" style="color: white" id="10Year">10 Years</button>
<button class="btn theme-dark-btn" style="color: white" id="20Year">20 Years</button>
</div>