JSFiddle - React, Tailwind, and code Playground

HTML

<button class="back button">Back</button>
<a class="back button" href="#">Back</a>
<a class="forward button" href="#">Forward</a>

CSS

* {
    font-family: inherit;
    font-size: 100%;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-width: 0;
    border-style: solid;
}

html { font-family: sans-serif }
html { padding: 1em }

.button {
    text-decoration: none;
    color: black;
    background-color: red;
    padding: 0.5em 1em 0.6em;
    position: relative;
    display: inline-block;
    border-width: 2px;
    border-color: inherit;
}

.button.back {
    margin-left: 1em;
    padding-left: 0.5em;
    border-left-width: 0;
    border-radius: 0 0.2em 0.2em 0;
}

.button.forward {
    margin-right: 1em;
    padding-right: 0.5em;
    border-right-width: 0;
    border-radius: 0.2em 0 0 0.2em;
}

.button.back:before,
.button.forward:after {
    content: '';
    background-color: inherit;
    width: 1.5em;
    height: 76%;
    position: absolute;
    top: 0.125em;
    z-index: -1;
    border: inherit;
    border-radius: 0.25em;
    transform: rotate(45deg);
}

.button.back:before { 
    left: -0.875em;
    border-left-width: 2px;
}
.button.forward:after { 
    right: -0.875em;
    border-right-width: 2px;
}