CSS - Button border gradient [duplicate] - html

Question

This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
After searching extensively I am stuck on how I might go about replicating this button in CSS, specifically the border as I deed to use this on other elements if possible.
The Designed Button
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 🤦🏻‍♂️

Answer 1

Consider using a ::before hidden behind. This is the closest I can make it without additional elements.
button.rounded-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1rem 2.25rem;
border-radius: 1000px;
border: none;
position: relative;
background: #343434;
font-size: 1.25rem;
line-height: 2rem;
color: #fff;
}
button.rounded-button::before {
content: '';
display: block;
position: absolute;
border-radius: 1000px;
top: -0.1em;
bottom: -0.1em;
right: -0.1em;
left: -0.1em;
z-index: -1;
background: linear-gradient(240deg, #ffffff 0%, #343434 25%);
}
body {
background: #1d1d1d;
padding: 2rem;
}
<button type="button" class="rounded-button">
Watch video
</button>
But it would be better to have a wrapper around the button as ::before with z-index: -1 is a bit of a hack.
Bonus
Then you can add some glass like effect to it.
button.rounded-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1rem 2.25rem;
border-radius: 1000px;
border: none;
position: relative;
background: #343434;
font-size: 1.25rem;
line-height: 2rem;
color: #fff;
cursor: pointer;
}
button.rounded-button::before {
content: '';
display: block;
position: absolute;
border-radius: 1000px;
top: -0.1em;
bottom: -0.1em;
right: -0.1em;
left: -0.1em;
z-index: -1;
background: linear-gradient(240deg, #343434 0%, #ffffff 20%, #343434 50%);
background-size: 140%;
background-position: 0 0;
transition: background .3s;
}
button.rounded-button:hover::before {
background-position: 100% 0;
}
body {
background: #1d1d1d;
padding: 2rem;
}
<button type="button" class="rounded-button">
Watch video
</button>

Answer 2

You can use box-shadow to apply a border effect on just the right side:
box-shadow: 5px 0 1px -2px grey;
.rounded-button {
box-shadow: 5px 0 1px -2px grey;
}
/* YOUR INITIAL CODE */
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;
}
<button type="button" class="rounded-button">
Watch video
</button>