clip-path

<div className="btn-hexagon-border mx-auto bg-dark">
  <button type="button" className="btn bg-white btn-hexagon font-weight-bold">
    {text}
  </button>
</div>

.btn-hexagon-border {
  width: 100%;
  clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%, 5% 0%);
}

.btn-hexagon {
  width: 100%;
  padding: 12px 0px;
  clip-path: polygon(calc(95% - 1px) 2px, calc(100% - 2px) 50%, calc(95% - 1px) calc(100% - 2px), calc(5% + 1px) calc(100% - 2px), 2px 50%, calc(5% + 1px) 2px);
}