JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="button ribbon-outset border">Click me!</a>

<br/>
<a href="#" class="button ribbon-outset border">I have a huge amount of text inside !!!!!!!!!!</a>

CSS

/* General Button Style */
 .button {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    min-width: 200px;
    height: 80px;
    margin: 40px auto;
    color: #fd0;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
.button:before, .button:after {
    position: absolute;
    content:'';
    width: 100%;
    left: 0px;
    height: 34px;
    z-index: -1;
}
.button:before {
    transform: perspective(15px) rotateX(3deg);
}
.button:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
}
/* Button Border Style */
 .button.border:before, .button.border:after {
    border: 4px solid #fd0;
}
.button.border:before {
    border-bottom: none;
    /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
    border-top: none;
    /* to prevent the border-line showing up in the middle of the shape */
}
/* Button hover styles */
 .button.border:hover:before, .button.border:hover:after {
    background: #fd0;
}
.button.border:hover {
    color: #fff;
}
/* Just for demo */
 body {
    background: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
    text-align: center;
}