Question

我有一个我需要的按钮：

（a）透明背景，10％#fff颜色（= 90％透明）

（b）正常状态下的虚线边框

（c）渐变边界：悬停

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

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

感谢任何人提前帮助!!

SNIPPET 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>

SNIPPET 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

你可以考虑这样的多个渐变：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

您可以考虑使用CSS变量以避免多次重复并轻松管理渐变颜色：

＆＃13;

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

＆＃13;

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

＆＃13;

如何创建具有渐变边框和透明背景的按钮

1 个答案: