Кнопка с закругленными краями и градиентной границей

Question

Я не использовал стандартный подход в CSS, есть ли более семантически правильный подход и больше кросс-браузер для решения таких проблем?

Проблемы: Много кода. Использование свойства :: after (я думаю, что это лишнее). Кнопка имеет фиксированный размер.

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  background: #050B1F;
}

#button-continue {
  margin-top: 46px;
  
  width: 331px;
  height: 54px;
  border: 3px solid transparent;
  border-radius: 56px;
  background-color: rgba(11, 27, 55, 1);
  position:relative;
  cursor:pointer;
  
}

#button-continue::after {
content: "";
width:337px;
height:60px;
position:absolute;
z-index:-5;
top:-6px;
left:-6px;

border-radius: 56px;
 background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px);
}
.button-continue__text {
  text-transform: uppercase;
  font-size: 0.875em;
  color: #99CEFF;
  font-weight: 400;
}
.button-continue__text::after {
  content: url('img/icon-continue.svg');
  position: relative;
  top: 3px;
  left: 10px;
}

<button id="button-continue">
   <span class="button-continue__text">Continue</span>
</button>

Answer 1

Я нашел этот пример онлайн.

Используя это, вы можете избежать использования псевдоэлемента. Но проблема, которую я обнаружил, заключалась в том, что созданный border-image не огибал border-radius. Так что это, вероятно, не то, что вы ищете.

Использование простой границы будет работать, но фоновое изображение не будет работать с закругленными границами. Поэтому то, что вы сделали, это, вероятно, способ сделать это.

Я просто включу свой код для полноты, но будьте осторожны.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #050B1F;
}

#button-continue {
  margin-top: 46px;
  width: 331px;
  height: 54px;
  border-width: 3px;
  border-style: solid;
  border-radius: 56px;
  border-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px) 1 round;
  background-color: rgba(11, 27, 55, 1);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.button-continue__text {
  text-transform: uppercase;
  font-size: 0.875em;
  color: #99CEFF;
  font-weight: 400;
}

<button id="button-continue">
   <span class="button-continue__text">Continue</span>
</button>