html - 将按钮从默认状态切换到按下状态并返回

Question

我为一个简单的按钮制作了样式。此按钮将打开一个下拉菜单。只要菜单打开，按钮就应该具有按下按钮的样式。

如何切换这些状态？我必须在那里使用一些javascript吗？我知道我可以使用 onClick=functionName()，但我怎样才能将其恢复为默认值？

.btn {
  cursor: pointer;
  font-weight: bold;
  border-style: solid;
  border-radius: 10px;
  padding: 10px 15px 10px 15px;
}

#menuBtn {
  margin-right: 0;
  color: #ffffff;
  border-color: #3c3e42;
  background: linear-gradient(#5e5f64, #3c3e42);
}

#menuBtnPressed {
  margin-right: 0;
  color: #666666;
  border-color: #3c3e42;
  background: linear-gradient(#2b2d32, #3c3e42);
}

<button class="btn" id="menuBtn">Default</button>

<button class="btn" id="menuBtnPressed">Pressed</button>

Answer 1

如果您还没有尝试过使用 :active，那么我将从它开始。但这里有两种不同的状态，您可以在按钮上使用。

:active : if you want background color only when the button is clicked and don't want to persist.

:focus: if you want background color untill the focus is off the button.