Блок с закруглёнными краями и градиентным border

[Delat]

Как сверстать блок с закруглёнными краями и градиентным border?

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

• Не нравится что кнопка вышла фиксированного размера.
• Много CSS-свойств.

*,
*::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) 100px);
}
.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>

Должно получиться вот так, но получилось не так как хотелось бы:

[Igor Schnaider]

Все размеры кнопки, в том числе border-radius, можно привязать к размеру шрифта для пропорционального масштабирования.

То, что много стилей в результате, в данном случае не страшно. Для псевдоэлемента не указывайте фиксированные размеры:

button:before {
  content: '';

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  margin: 10px;
  /* or just top, right, bottom, left: 10px; without margin */

  background-color: #fff;

  border-radius: inherit;
}

 

[Delat]

42 минуты назад, Igor Schnaider сказал:

Все размеры кнопки, в том числе border-radius, можно привязать к размеру шрифта для пропорционального масштабирования

вот это интересно, можете пояснить на примере? У меня объемлющий блок в котором находится кнопка, имеет ширину 375px. Как высчитать пропорции для border-radius в %?

Edited August 30, 2018 by Delat

[Igor Schnaider]

56 минут назад, Delat сказал:

Как высчитать пропорции для border-radius в %?

Не в %, а в тех же em/rem. По-нормальному, внутренний радиус должен быть чуть меньше внешнего, но для простоты я взял равный высоте.

https://codepen.io/anon/pen/JabaKr