Rewrite the title to: Focus on what the console buttons do, not other areas

Question

I have 4 buttons and when they are clicked I am trying to set focus on them so the user can see the currently active button. For some reason in the console it works as expected, when a button is clicked it adds focus, changes the background color based on CSS, then when another button is clicked the first button loses focus and the new button gets focus. When I don't have the console open it doesn't work. constoneYear=document.getElementById('1Year');constfiveYear

P粉020556231 · Answer

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;
}