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

所以我有或多或少的等待结果：

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

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

更新1

好吧，终于我找到了一种解决方法，可以实现我的愿望，它几乎全部来自SVG文件。我对我的SVG进行了一些微调，以获取两条不同的路径，一条路径具有渐变笔划但未填充，而另一条渐变已填充但无笔划。一个接一个的不透明是万能钥匙：）

<a type="button" href="#">
    <svg class="icon" viewBox="0 0 250 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
          <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="linearGradient-1">
              <stop stop-color="#08AEEA" offset="0%"></stop>
              <stop stop-color="#2AE88A" offset="100%"></stop>
          </linearGradient>
      </defs>
      <path fill="none" d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' />
      <path class="icon--plain" fill="url(#linearGradient-1)" d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' />
    </svg>
    Invest now
  </a>

以下是CSS（我使用SCSS btw）：

a[type="button"] {
  position: relative;
  padding: 1rem 1.75rem;
  z-index: 0;

  .icon {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;

    path {
      transition: opacity 0.4s ease;

      &:first-of-type {
        fill: transparent;
        stroke: url(#linearGradient-1);
        stroke-width: 3;
        opacity: 1;
      }

      &.icon--plain {
        opacity: 0;
        stroke: none;
        stroke-width: 0;
      }
    }    
  }

  &:hover {
    path {
      &:first-of-type {
        opacity: 0;
      }

      &.icon--plain {
        opacity: 1;
      }
    }
  }
}

感谢您的帮助，干杯！

Answer 1

一个想法是依靠TableAdapter，因为您使用的是背景图像，我们可以模拟透明效果，但是您会在背景上产生滚动效果：

background-attachement:fixed

.container {
  padding:100px 0;
  background:
    url(https://picsum.photos/800/300?image=1069) fixed;
}
.button {
  width:200px;
  height:50px;
  cursor:pointer;
  color:#fff;
  margin: auto;
  border:3px solid transparent;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  background:
    url(https://picsum.photos/800/300?image=1069) padding-box fixed,
    linear-gradient(-45deg, #2ae88a 0%, #08aeea 100%) border-box;
}
.button:hover {
  background:
    linear-gradient(-45deg, #2ae88a 0%, #08aeea 100%) border-box;
}

Answer 2

这可以通过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类中添加自己的渐变...

在这里试用我的解决方案： Intelligent Job-Scheduling.

Answer 3

解决方案

好吧，终于我找到了一种解决方法，可以实现我的愿望，它几乎全部来自SVG文件。我调整了一下我的SVG，以便在渐变笔触上获得两条不同的路径但未填充，而另一个渐变笔迹已填充但没有笔触。一个接一个的不透明是万能钥匙：）

<a type="button" href="#">
<svg class="icon" viewBox="0 0 250 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="linearGradient-1">
          <stop stop-color="#08AEEA" offset="0%"></stop>
          <stop stop-color="#2AE88A" offset="100%"></stop>
      </linearGradient>
  </defs>
  <path fill="none" d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' />
  <path class="icon--plain" fill="url(#linearGradient-1)" d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' />
</svg>
Invest now

以下是CSS（我正在使用SCSS btw）：

a[type="button"] {
  position: relative;
  padding: 1rem 1.75rem;
  z-index: 0;

  .icon {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;

    path {
      transition: opacity 0.4s ease;

      &:first-of-type {
        fill: transparent;
        stroke: url(#linearGradient-1);
        stroke-width: 3;
        opacity: 1;
      }

      &.icon--plain {
        opacity: 0;
        stroke: none;
        stroke-width: 0;
      }
    }    
  }

  &:hover {
    path {
      &:first-of-type {
        opacity: 0;
      }

      &.icon--plain {
        opacity: 1;
      }
    }
  }
}

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

3 个答案: