Button with rounded edges and gradient border - css

Question

I did not use the standard approach in CSS, is there a more semantically correct approach and moree cross-browser to solving such problems?
Problems:
Many code.
Using the property ::after (I think this is superfluous).
The button has a fixed size.
*,
*::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

I found this example online.
By using this you can avoid using a pseudo-element. But the problem I found was that the created border-image does not bend around the border-radius. So this is probably not what you are looking for.
Using a plain-coloured border would work, but the background image is not made to work with rounded borders. So what you did is probably the way to do it.
I'll just include my code for completeness, but be warned.
*,
*::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>