JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding: 20px;">
    <a class="next" href="#"><span>Next</span></a>
</div>

CSS

a.next {
    padding: 6px 12px;
    border-width: 1px !important;
    border-color: #333 !important;
    background: #5BFF2D; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */ 
    border-radius: 6px 0 0 6px !important;
    border-style: solid none solid solid !important;
    position: relative;
    overflow-y: hidden;
}

a.next:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #3CF01A;
    position: absolute;
    top: -16px;
    left: 100%;
    z-index: 2;
}

a.next:after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 15px solid #2EDE0D;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 15px;
    left: 100%;
    z-index: 2;
}

a.next span:before{ /*gradient smoother*/
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 16px solid transparent;
    border-left: 16px solid #35EB13;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 3;  
    opacity: .3;
    filter: alpha(opacity=30);    
}

a.next span:after {/*border*/
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 17px solid transparent;
    border-left: 17px solid #333;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: -1px;
    left: 100%;
    z-index: 1;    
}