JSFiddle - React, Tailwind, and code Playground

HTML

<div>
кнопка с текстом
</div>

CSS

body{
padding: 50px;
}

div{
  width: 500px;
    height: 55px;
    background: red;
    position: relative;
}

div:before{
    content: "";
    position: absolute;
    top: -25px; 
    left: -4px;
    width: 100px;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 25px solid red;
    -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
div:after{
content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

div:hover{
background: #222;
color: #fff;
}