JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<button>Кнопка</button>
<br>
<br>
<button>Кнопка большая и т. п.</button>

CSS

button {
  font-size: inherit;
  border: none;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 10px 20px;
  margin-top: 6px;
  border-radius: 6px 0 6px 6px;
  -webkit-appearance: none;
  transition: background-color .2s;
  cursor: pointer;
}

button:before,
button:after {
  content: '';
  position: absolute;
  display: block;
}


button:before {
  top: -6px;
  right: 0;
  width: 40px;
  background-color: #000;
  height: 6px;
  border-radius: 0 6px 0 0;
  transition: background-color .2s;
}

button:after {
  width: 0;
  height: 0;
  top: -6px;
  right: 40px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid #000;
  border-right: 12px solid #000;
  border-left: 6px solid transparent;
  transition: border-color .2s;
}

/**/
button:hover,
button:hover:before {
  background-color: purple;
}

button:hover:after {
  border-bottom-color: purple;
  border-right-color: purple;
}