Expanding Corners Button

HTML

CSS

*,*:before,*:after {
  _outline: 1px dashed red
}
html,body {
  width: 100%;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
body { background: #000 }
button {
  --theme-color: #2EFFB5;
  --s: 10px;
  --animation-timing: .3s;
  --pad: 2px;
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
  position: relative;
  cursor: pointer;
  appearance: none;
  color: white;
  border: 1px solid rgb(255 255 255 / 20%);
  padding: 10px 16px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, rgb(255 255 255 / 5%), rgb(255 255 255 / 20%));
  transition: background var(--animation-timing) ease, border var(--animation-timing) ease;
  &::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: calc(-1 * var(--pad));
    padding: var(--pad);
    border: 2px solid white;
    background: transparent content-box;
    mask:
      conic-gradient(#000 0 0) content-box,
      conic-gradient(at var(--s) var(--s), #0000 75%, #000 0)
      0 0 / calc(100% - var(--s)) calc(100% - var(--s));
    backface-visibility: hidden;
    pointer-events: none;
    transition:
      inset var(--animation-timing) ease,
      padding var(--animation-timing) ease,
      border-color var(--animation-timing) ease;
    will-change: inset, padding;
  }
}
button:hover {
  border: 1px solid var(--theme-color);
  background:
    linear-gradient(
      to right,
      color(from var(--theme-color) srgb r g b / 5%),
      color(from var(--theme-color) srgb r g b / 20%)
      );
  --pad: 8px;
  &::before { border-color: var(--theme-color); }
}