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 144 58">
    <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 0,
      125 0,
      140 15,
      140 58,
      0 58,
      0 0"></polygon>
  </svg>
  <!-- svg item end-->
</div>


<!--<svg>
  <pattern id="pattern"
      width="100%" height="100%">
      <image xlink:href="https://cs7.pikabu.ru/post_img/big/2018/10/04/6/1538642155149593739.jpg" width="300" height="200"/>
  </pattern>

  <polygon fill="url(#pattern)"
           stroke="turquoise" stroke-width="4"
           points="85,0 170,61 137,161 32,161 0,61"
           transform="translate(65,20)"/>
</svg>-->

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
  <defs>
    <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://cs7.pikabu.ru/post_img/big/2018/10/04/6/1538642155149593739.jpg" />
    </pattern>
  </defs>
  <path d="M55 0,35 100,240 100,240 0z" fill="url(#pattern1)"></path>
</svg>

CSS

.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;
}