JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<br/>
Here I have a <span class="button">Button</span>
<br/>
<br/>

CSS

/* main button block */
.button {
    display:inline-block;
    background: #f00;
    position: relative;
    line-height: 60px;
    text-align: center;
    padding: 0 20px;
    height: 60px;
    margin-left: 0.5em;
}

/* common background color to all */
.button, .button::before, .button::after {
    background-color: #f00;
}

/* shared styles to make left and right lines */
.button::before, .button::after {
    content: "";
    position: absolute;
    height: 50px;
    width: 5px;
    top: 5px;
    
}

/* pull the left 'line' out to the left */
.button::before {
    left: -5px;
}

/* pull the right 'line' out to the right */
.button::after {    
    right: -5px;
}