JSFiddle - React, Tailwind, and code Playground

HTML

<p class="go-checkout">
<input type="submit" name="checkout" class="button" value="Оформить заказ"/>
</p>

CSS

p {text-align: center; margin: 20px;}
input {padding: .7em 1em .7em 2em;
      float: left;
      text-decoration: none;
      color: #444;
      background: #ddd;  
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);  
      -moz-border-radius: .4em 0 0 .4em;
      -webkit-border-radius: .4em 0 0 .4em;
      border-radius: .4em 0 0 .4em;  
     }
p input::after{
      background: #ddd;
      content: "";
      height: 2.5em;
      margin-top: -1.25em;
      position: absolute;
      right: -1em;
      top: 50%;
      width: 2.5em;
      z-index: -1;  
      -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg); 
      transform: rotate(45deg);
      -moz-border-radius: .4em;
      -webkit-border-radius: .4em;
      border-radius: .4em;
    }