html - 防止在图标转换期间调整按钮大小

Question

截至目前，我的按钮在过渡期间变大了。我的目标是让箭头从左向右移动，而无需调整实际按钮的大小。 JSFiddle

我尝试在按钮上使用 max-width: 100%，但此解决方案使过渡变得丑陋。

HTML

<a href="" class="btn btn-primary">
    Dont make me larger
    <i class="arrow-right"></i>
</a>

CSS

.arrow-right {
    /* STYLING */
  margin-left: 10px;
    border: solid #fff;
    border-radius: 1px;
      border-width: 0 3px 3px 0;
      display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);

    /* TRANSITION */
    -webkit-transition: 0.5s; /* Safari */
    transition: 0.5s;
}

.btn-primary:hover .arrow-right {
    margin-left: 15px;
} 

Answer 1

实现此功能的一种方法是将按钮设置为 position relative 并将箭头设置为 position absolute，您可以使按钮的大小保持不变:

https://jsfiddle.net/ahmadabdul3/6yc5Lztw/1

这种方法的问题是你必须弄清楚箭头应该使用像素和 top 属性向下多远，所以不同的按钮高度在这里不会自动起作用

另一种方法是在按钮右侧添加填充，当您将鼠标悬停时，您会删除与向箭头添加边距量相同数量的填充像素。基本上我向按钮添加了 20px of padding-right，并且由于箭头在悬停时添加了 5px or margin，所以我将 padding right悬停时按钮 15px

https://jsfiddle.net/ahmadabdul3/6yc5Lztw/4/

如果您使用以下内容正确设置了 css，此解决方案将始终保持箭头和文本对齐:

display: inline-block;
vertical-align: middle;