具有透明背景的按钮渐变边框

Question

这是我会得到的结果：

所以默认按钮有透明背景的渐变边框（因为我想通过它看到父级的背景）。当用户将鼠标悬停在按钮上时，我想用相同的渐变填充它有边框。

所以首先我尝试使用 border-image 属性和我的边框的 .svg 图像：

button {
  background: transparent;
  background-repeat: no-repeat;
  border: 3px;
  border-style: solid;
  border-color: transparent;
  border-image-source: url(assets/images/icons/border.svg);
  border-image-repeat: stretch stretch;
  border-image-slice: 49;
  border-image-width: 100px;
  border-image-outset: 6px;
  padding: 16px 28px;
  border-radius: 100px;
}

所以我或多或少得到了我正在等待的结果：

现在，如何管理悬停动画并在不改变大小的情况下填充背景！？

也许边框图像不是最好的方法？

感谢您的帮助，干杯！

Answer 1

这可以通过 CSS 渐变来实现。看看我下面的解决方案：

.box {
  width: 250px;
  height: 100px;
  background: transparent;
  border: 5px solid transparent;
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
  color: white;
}

.box:hover {
  background: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}

请注意，您需要将自己的渐变添加到....btn下的类中background-image: linear-gradient

在这里尝试我的解决方案： https ://codepen.io/lachiekimber/pen/mjYNeN