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的{{1}}

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

如果您正确设置了css，则此解决方案将始终使箭头和文本对齐：

15px

Answer 2

将按钮设置为相对位置，然后将left值应用于悬停，如下所示：

    .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;

    /* New Code */
    position:relative;
    left:0
}

.btn-primary:hover .arrow-right {
    left:5px
}

https://jsfiddle.net/du0rLphc/1/

防止在图标过渡期间调整按钮的大小

2 个答案: