<button>Lorem ipsum</button>

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #0f0e12;
}

button {
  position: relative;
  background: none;
  border: none;
  color: #fefb66;
  font-size: 2em;
  padding: 1em;
  white-space: nowrap;
  transition: color 250ms;
  z-index: 0;
}

button:hover {
  color: #0f0e12;
}

button:hover::after {
  opacity: 1;
}

button::before,
button::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 32px solid transparent;
  z-index: -1;
}

button::before {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Cpath d='M83,96.87l15-17.31A12,12,0,0,0,101,71.69V13A12,12,0,0,0,89,1H28.05A12,12,0,0,0,19,5.13l-15,17.31A12,12,0,0,0,1,30.31V89a12,12,0,0,0,12,12H74A12,12,0,0,0,83,96.87Z' fill='none' stroke='%23fefb66' stroke-width='2'/%3E%3C/svg%3E") 32;
}

button::after {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Cpath d='M83,96.87l15-17.31A12,12,0,0,0,101,71.69V13A12,12,0,0,0,89,1H28.05A12,12,0,0,0,19,5.13l-15,17.31A12,12,0,0,0,1,30.31V89a12,12,0,0,0,12,12H74A12,12,0,0,0,83,96.87Z' fill='%23fefb66' stroke='%23fefb66' stroke-width='2'/%3E%3C/svg%3E") 32 fill;
  opacity: 0;
  transition: opacity 250ms;
}