html - CSS/HTML 按钮动画不正确

Question

此 CSS/HTML 按钮与另一个正常工作的 HTML 按钮具有完全相同的代码。它应该向下平移 4 个像素。另一个 HTML 按钮正是这样做的，尽管具有完全相同的代码，但按钮的阴影决定向上移动。

.back {
    font-size: 28px;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1px #f39c12;
    background: #e67e22;
    text-align: center;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-box-shadow: 0px 6px 0px #d35400;
    -moz-box-shadow: 0px 6px 0px #d35400;
    box-shadow: 0px 6px 0px #d35400;
    font-family: "Futura";
    margin: -20px -50px;
    position: relative;
    top: 50%;
    left: 50%;
}

.back:hover {
    background: #ffad66;
    color: #ffffff;
    -webkit-box-shadow: 0px 6px 0px #e07f43;
    -moz-box-shadow: 0px 6px 0px #e07f43;
    box-shadow: 0px 6px 0px #e07f43;
}

.back:active {
    -webkit-box-shadow: 0px 2px 0px #d35400;
    -moz-box-shadow: 0px 2px 0px #d35400;
    box-shadow: 0px 2px 0px #d35400;
    transform: translateY(4px);
}

Answer 1

这可能是由于默认 display:inline应用于 <a> 的 CSS 规则元素。这将影响按钮的垂直位置和动画行为。

尝试将以下内容添加到您的 CSS: display:inline-block;

这将覆盖默认的 display:inline您的反向链接，并且应该达到预期的结果:

.back {
    font-size: 28px;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1px #f39c12;
    background: #e67e22;
    text-align: center;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-box-shadow: 0px 6px 0px #d35400;
    -moz-box-shadow: 0px 6px 0px #d35400;
    box-shadow: 0px 6px 0px #d35400;
    font-family: "Futura";
    margin: -20px -50px;
    position: relative;
    top: 50%;
    left: 50%;
    /* Add rule to specify inline-block display behavior */
    display: inline-block;
}

或者，您可以只使用 <button>标签而不是 <a>标签。使用按钮标签意味着您的原始 CSS 将按预期工作，而不需要此答案中建议的更新:

<!-- 
Old approach
<a class="back">Test</a> 
-->

<!-- Alternative approach -->
<button class="back">Test</button>