时间戳

首页 > 解决方案 > CSS/HTML 按钮动画不正确

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

问题描述

这个 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);
}

标签： htmlcss

解决方案

这可能是由于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>

推荐阅读