Как сделать линейный градиент на границе кнопки

Question

Мои ожидания:

Мой код:

.row-product-btn {
  display: flex;
  justify-content: center;
}

.row-product-btn-cl {
  width: 155px;
  height: 47px;
  background: linear-gradient(90deg, #242333 0%, #3C3B53 100%);
  border-radius: 50px;
  border: 3px solid transparent;
  border-image: linear-gradient(90deg, #682FBD 0%, #CB4CBC 100%);
  -moz-border-image: -moz-linear-gradient(90deg, #682FBD 0%, #CB4CBC 100%);
  -webkit-border-image: -webkit-linear-gradient(90deg, #682FBD 0%, #CB4CBC 100%);
  border-image-slice: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  color: $white;
  font-weight: bold;
}

<button class="row-product-btn-cl">
        <span>Купить</span>
        <span><span style="color: #21CC14; margin-right: 5px;">$</span>10</span>
        </button>

Answer 1

Без псевдоэлементов здесь, к сожалению, никак, по крайней мере, с ними легче.

Вот CSS, прочитайте про псевдоэлементы:

.row-tab-bank .row-product-block .row-product-btn .row-product-btn-cl {
  width: 155px;
  height: 47px;
  border: none;
  border-radius: 45px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  background: -webkit-gradient( linear, left top, right top, from(#682fbd), to(#cb4cbc));
  background: linear-gradient(90deg, #682fbd 0%, #cb4cbc 100%);
}

.row-tab-bank .row-product-block .row-product-btn .row-product-btn-cl::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  border-radius: 50px;
  background: -webkit-gradient( linear, left top, right top, from(#242333), to(#3c3b53));
  background: linear-gradient(90deg, #242333 0%, #3c3b53 100%);
}

span {
  z-index: 2;
}

<button class="row-product-btn-cl">
        <span>Купить</span>
        <span><span style="color: #21CC14; margin-right: 5px;">$</span>10</span>
        </button>

Answer 2

Проще паренной репы.

body { background: #111; } 

.row-product-btn {
  display: flex;
  justify-content: center;
}

.row-product-btn-cl{
  background: transparent;
  border: 0;
  }

.row-product-btn-cl > span{
  width: 155px;
  height: 47px;
  background: linear-gradient(90deg, #242333 0%, #3C3B53 100%);
  border-radius: 50px;
  border: 0;
  border-image-slice: 1;
  display: inline-block;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  line-height: 44px;
  color: $white;
  font-weight: bold;
  color: #fff;
}

.row-product-btn-cl::before{
  border-radius: 50px;
  content: ' ';
  position: absolute;
  margin: -3px 0 0 -3px;
  width: 161px;
  height: 53px;
  background: linear-gradient(90deg, #682FBD 0%, #CB4CBC 100%);
  z-index: -1;
}

<button class="row-product-btn-cl">
        <span>Купить <span style="color: #21CC14; margin-right: 5px;">$</span>10</span>
        </button>

БЛОГ НА HUSL

Как сделать линейный градиент на границе кнопки

Ответы (2 шт):