JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
<button class="button">
  My button!
</button>
</div>

SCSS

*, *:before, *:after {
    box-sizing: border-box;
}

.background {
  background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
  width:500px;
  height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.button {
    box-sizing:border-box;
    display: inline-block;
    padding:0.5em 0;
    background:none;
    border:none;
    border-top:2px solid #0498f8;
    border-bottom:2px solid #0498f8;
    border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
    border-image-slice: 1;
    position: relative;
    text-transform: lowercase;
    transition:background 0.3s;
    color: #fff;
    cursor: pointer;
    font-size:1em;
    &:before,
    &:after {
        content: '';
        display: block;
        width: 2em;
        height: calc(100% + 4px);
        border-radius: 3em 0 0 3em;
        border: 2px solid #0498f8;
        position: absolute;
        border-right: none;
        transition:background 0.3s;
        left: -2em;
        top: -2px;
    }
    &:after {
        border-radius: 0 3em 3em 0;
        border: 2px solid #4db848;
        position: absolute;
        border-left: none;
        left:auto;
        right: -2em;
        top: -2px;
    }
    &:hover {
        background:rgba(0,0,0,0.3);
        &:after,
        &:before {
            background:rgba(0,0,0,0.3);
        }
    }
}