如何使用梯度边框和透明背景创建按钮

Question

我有一个我需要的按钮：

(a(具有10％#fff颜色的透明背景(= 90％透明(

(b(正常状态下的虚线

(c(梯度边框：悬停

我无法访问HTML代码，但提出了以下CSS代码。不幸的是，虽然它确实具有梯度边框，但我无法同时获得透明的背景和边框梯度。

有人可以帮助我解决这个问题吗？也许有更好的代码可以实现这一目标？

感谢任何人提前帮助！

摘要1：这是悬停的梯度边界应如何看

div {
background-image: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png); 
 background-position: center; 
 background-repeat: no-repeat;
width: 350px;
height: 200px;
}
span {
position: relative;
top: 50px;
left: 50px;
}
.showFilters {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #000;
        width: 200px;
        border: 1px dashed #fff;
          border-style: dashed;
          position: relative;
          display: inline-block;
          outline: none;
          appearance: none;
          background: red;
          z-index: 3;
          height: 75px;
          border-radius: 3px;
   }
.showFilters:before {
  content: attr(data-text);
  z-index: -1;
  border-radius: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { showFilters:before {
  background: #4f4f4f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}}
.showFilters:after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  z-index: -2;
  border-radius: 1px;
  background: #fff;
}
.showFilters:hover {
  border: none;
  color: #777;
  background: linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee);
}
.active {
  background: linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee);
}
.active:before{
  color: #2084c3;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { .active:before {
  background: linear-gradient(to right, #7b63f0 0%, #3ad4c1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}}

<div><span>
<button class="showFilters">Button
</button></span>
</div>

摘要2：这是按钮背景的外观和正常/非悬停状态的虚线边框(但是它应该在悬停状态下从上方具有梯度边框(

.showFilters, .showFilters:visited {
        background-color: rgba(255, 255, 255, 0.3) !important;
        color: #fff;
        width: 100px;
        height: 50px;
        border: 1px dashed rgb(255, 255, 255) !important;
}
.showFilters:hover, .showFilters:active {
        background-color: rgba(255, 255, 255, 0.4) !important;
        border-style: solid !important;
        color: #fff;
}
div {
background-image: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png); 
 background-position: center; 
 background-repeat: no-repeat;
width: 350px;
height: 200px;
}
span {
position: relative;
top: 50px;
left: 50px;
}

<div><span>
<button class="showFilters">Button
</button></span>
</div>

Answer 1

您可以考虑这样的多个梯度：

div {
  background-image: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 350px;
  height: 200px;
}
span {
  position: relative;
  top: 50px;
  left: 50px;
}
.showFilters {
  background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 1px 1px/calc(100% - 2px) calc(100% - 2px) no-repeat;
  color: #000;
  width: 200px;
  border: 1px dashed #fff;
  border-style: dashed;
  position: relative;
  display: inline-block;
  outline: none;
  appearance: none;
  z-index: 3;
  height: 75px;
  border-radius: 3px;
}
.showFilters:before {
  content: attr(data-text);
  z-index: 1;
  border-radius: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  showFilters:before {
    background: #4f4f4f;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.showFilters:hover {
  border: none;
  color: #777;
  background:
  linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)) 1px 1px/calc(100% - 2px) calc(100% - 2px),
  linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee) 0 0/100% 1px,
  linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee) 0 0/1px 100%,
  linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee) 0 100%/100% 1px,
  linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee) 100% 0/1px 100%;
  background-repeat:no-repeat;
}
.active {
  background:,
  linear-gradient(to right,rgba(255,255,255,1) 20%,red) 1px 1px/calc(100% - 2px) calc(100% - 2px) no-repeat, linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee);
}
.active:before {
  color: #2084c3;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .active:before {
    background: linear-gradient(to right, #7b63f0 0%, #3ad4c1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

<div><span>
<button class="showFilters">Button
</button></span>
</div>

update

您可以考虑CSS变量，以避免使用许多重复并轻松管理梯度颜色：

:root {
  --main-gradient:linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee);
}
div {
  background-image: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 350px;
  height: 200px;
}
span {
  position: relative;
  top: 50px;
  left: 50px;
}
.showFilters {
  background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 1px 1px/calc(100% - 2px) calc(100% - 2px) no-repeat;
  color: #000;
  width: 200px;
  border: 1px dashed #fff;
  border-style: dashed;
  position: relative;
  display: inline-block;
  outline: none;
  appearance: none;
  z-index: 3;
  height: 75px;
  border-radius: 3px;
}
.showFilters:before {
  content: attr(data-text);
  z-index: 1;
  border-radius: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  showFilters:before {
    background: #4f4f4f;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.showFilters:hover {
  border: none;
  color: #777;
  background:
  linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)) 1px 1px/calc(100% - 2px) calc(100% - 2px),
  var(--main-gradient) 0 0/100% 1px,
  var(--main-gradient) 0 0/1px 100%,
  var(--main-gradient) 0 100%/100% 1px,
  var(--main-gradient) 100% 0/1px 100%;
  background-repeat:no-repeat;
}
.active {
  background:,
  linear-gradient(to right,rgba(255,255,255,1) 20%,red) 1px 1px/calc(100% - 2px) calc(100% - 2px) no-repeat, linear-gradient(135deg, #7b63f0, #3ad4c1, #36b7ee);
}
.active:before {
  color: #2084c3;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .active:before {
    background: linear-gradient(to right, #7b63f0 0%, #3ad4c1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

<div><span>
<button class="showFilters">Button
</button></span>
</div>