html - 按钮单击事件未发生

Question

我有一堆我最近用 CSS 设计的菜单按钮

<button type="button" class="menu">Menu Button</button>

CSS：

button.menu {
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    font-size: 12px;
    border: none;
    color: #1a3e66;
    text-align: right;
    padding-right: 45px;
    padding-bottom: 6px;
    height: 34px;
    width: 134px;
}

button.menu:hover {
    padding-right: 49px;
    padding-bottom: 10px;
    cursor: pointer;
}

button.menu:active {
    padding-right: 45px;
    padding-bottom: 6px;
}

如果单击填充更改的位置，则不会触发单击事件。有没有办法在按钮内移动文本或修复此行为？

编辑：更新并删除了无关信息。

Answer 1

:active 选择器不是点击事件。

在 css 中处于活动状态意味着当您单击某些东西时，只要单击仍然处于活动状态。你需要的是点击事件。