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 {
  content: '';
  position: absolute;
  display: block;
  top: -6px;
  right: 0;
  width: 52px;
  background-color: #000;
  height: 6.5px;
  border-radius: 0 6px 0 0;
  -webkit-clip-path: polygon(calc(0% + 12px) 0%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(calc(0% + 12px) 0%, 100% 0, 100% 100%, 0% 100%);
  transition: background-color .2s;
}


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