JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="next-btn next-step tr-next-button">
  <span>next</span>
  <!-- svg item -->
  <svg class="next-btn-svg" viewBox="-2 0 524 268">
    <pattern id="pattern" width="100%" height="100%" patternContentUnits="objectBoundingBox">
      <image xlink:href="https://cs7.pikabu.ru/post_img/big/2018/10/04/6/1538642155149593739.jpg" width="1" height="1"  preserveAspectRatio="none" />
    </pattern>
    <polygon  fill="url(#pattern)" points="
      0 268,        
      523 268,        
      548 240,        
      548 0,        
      27 0,        
      0 25"></polygon>
  </svg>
  <!-- svg item end-->
</div>

<div class="next-btn next-step tr-next-button">
  <span>next</span>
  <!-- svg item -->
  <svg class="next-btn-svg" viewBox="-2 0 524 280">
    <pattern id="pattern1" width="100%" height="100%" patternContentUnits="objectBoundingBox">
      <image xlink:href="https://cs7.pikabu.ru/post_img/big/2018/10/04/6/1538642155149593739.jpg" width="1" height="1"  preserveAspectRatio="none" />
    </pattern>
    <polygon  fill="url(#pattern1)" points="
      0 280,
      522 280,
      552 252,
      552 0,
      0 0"></polygon>
  </svg>
  <!-- svg item end-->
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.next-btn,.submit-btn {
    position: relative;
    /*display: inline-block;*/
    text-align: center;
    cursor: pointer;
    height: 12rem;
    width: 28rem;
    border-radius: 2px;
    overflow: hidden;
}

.next-btn span,.submit-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
    padding: 0 1rem;
    text-transform: uppercase;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    word-wrap: break-word;
}

.next-btn svg,
.submit-btn svg {
    position: relative;
    height: 100%;
    width: 100%;
}

.next-btn polygon,.submit-btn polygon {
    /*fill: #131721;*/
    stroke: #ffbb20;
    stroke-width: 3px;
    background-size: cover;
}

.next-btn:hover polygon,
.submit-btn:hover polygon {
    fill: #23293a;
}