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?!

CodePudding user response：

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="#" >
Button</a>

CodePudding user response：

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>

CodePudding user response：

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