CSS - Button border gradient [duplicate]-CodePudding

This question already has answers here:

button.rounded-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.125rem 2rem;
    
    position: absolute;
    width: 13.5919rem;
    height: 4.375rem;
    
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.7942rem);

    border-radius: 5.8652rem;
    border-image-slice: 1 1 0 0;
    border: 1px solid;
    border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);
    
    font-size: 1.25rem;
    line-height: 2.125rem;
    color: #fff;
}

body {
    background: #393939;
}

<!-- SVG Not included with the example -->
<button type="button" class="rounded-button">
  Watch video
  <!-- <img src="/assets/img/glyphs/ic-play.svg" alt="Watch video"> -->
</button>

Ideally I am looking to have a class that I can apply to any element which adds the desired effect and that can be reversed, I have tried pseudo elements such as :after but to no joy

I really am not sure if this can be acvhieved in pure css

Page link：https//www.codepudding.com/Softwaredesign/134410.html

Prev:Disable button if one of the checkboxes are not checked

Next:Need to put the image and text on same line