Creating a button with pure css - css

Question

I'm trying to create a button like this:
This needs to be done in pure css.
I tried to do, nothing happened, it does not work correctly:
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400,rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
How can I do that?!

Answer 1

You can add the CSS properties inside a class. Then add the class to an HTML element with text-decoration: none; property as follows:
.pure_css_button {
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
text-decoration: none;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
}
<a href="#" class="pure_css_button">
Button</a>

Answer 2

button {
cursor: pointer;
font-size: x-large;
padding: 0.6rem 2rem;
font-weight: bold;
overflow: hidden;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border:0;
border-radius: .3rem;
position: relative;
border-top: 2px solid hsl(24, 49%, 15%);
border-bottom: 2px solid hsl(24, 49%, 15%);
}
button::after,button::before{
content: '';
height: 100%;
width: .15rem;
position: absolute;
top:0;
background:linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) ;
}
button::before{
left: 0;
}
button::after{
right: 0;
}
<button>
Pure Css</button>

Answer 3

it's possible using body::after content "text" and style it