悬停中的背景图片无法正常工作

Question

我正在尝试添加一种悬停效果，当用户将鼠标悬停在按钮上时会增加背景图像，但悬停时左侧仍有少许透明区域。

基本上，我添加了两个按钮，彼此相邻，问题出在第二个按钮上，如果我删除第一个按钮或将第二个按钮移到下一行，则可以正常工作。

这就是我得到的。

这是我移除第一个按钮时的外观

这是代码

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Answer 1

在某些屏幕尺寸下，背景不是从最左边开始的；这就是为什么它会留出很小的空隙（白线）的原因。

您可以将background-origin: border-box;添加到.gradient-button-2:hover。在MDN上可以找到很好的解释和现场示例：

  

background-origin CSS属性设置背景定位区域。换句话说，它使用background-image属性设置图像集的原点位置。

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    background-origin: border-box; /* This line is new! */
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Answer 2

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
     background-position: -1px;
    background-size: 101%;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
    
     
     
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
  
    
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>