How to create button with gradient border and transparent background

Question

I have a button that I need to have:

(a) a transparent background with 10% #fff color (= 90% transparent)

(b) a dashed border in normal state

(c) a gradient border on :hover

I dont have access to the HTML code, but came up with the following CSS code. Unfortunately, while it does have a gradient border, I cant get the transparent background AND the border gradient at the same time.

Could someone help me in fixing this? Perhaps there is a better code to achieve this?

Thanks to anyone helping in advance!!

SNIPPET 1: this is how the gradient border on hover should look

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: This is how the button background should look and the dashed border in normal/non-hover state (but it should have gradient border from above in hover state)

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

Temani Afif Temani Afif · Accepted Answer · 2018-02-13T21:30:08

You can consider multiple gradient like this:

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

You can consider CSS variable in order to avoid many repetitioon and easily manage the gradient colors:

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

How to create button with gradient border and transparent background

1 Answers