JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
      <button class="arrow">green-right</button>
    </body>
  </html>

SCSS

$base-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5), 0 0 5px inset rgba(0, 0, 0, 0.4);
$base-color: #5eb663;

.arrow {
  position: relative;
  font-size: 1em;
  width: 180px;
  height: 40px;
  border: none;
  border-radius: 2px;
  
  &::after {
    content: "";
    position: absolute;
    right: 0;
    width: 28px;
    height: 28px;
    margin-top: -4.5px;
    margin-right: -14px;
    transform: rotateZ(45deg) rotate3d(0.5, 0.5, 0, 50deg);
    //clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
  }
  
  &::before {
    content: "";
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    margin-top: -10.5px;
    margin-right: -8px;
    clip-path: polygon(20% 0%, 80% 0%, 80% 100%, 20% 100%);
    z-index: 10;
  }
  
  &, &::after, &::before {
    cursor: pointer;
    background-color: #5eb663;
    box-shadow: $base-shadow, 0 4px 1px -3px inset rgba(255, 255, 255, 0.8);
  }

  &:hover, &:hover::after, &:hover::before {
    background-color: #7aed81;
    box-shadow: $base-shadow, 0 4px 1px -3px inset rgba(255, 255, 255, 0.8), 0 0 5px 2px rgba(40, 80, 40, 0.7);
  }

  &:active, &:active::after, &:active::before {
    background-color: #cfdf93;
    box-shadow: $base-shadow, 0 4px 1px -3px inset rgba(0, 0, 0, 0.8);
  }

}



body {
  background-color: rgb(30, 30, 30);
  padding: 50px;
}