JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
    <button>Submit</button>
</div>

CSS

*{
  box-sizing:border-box;
}

body {
  background: black;
}

.button {
  padding: 1px;
  margin: 20px auto;
  display: table;
  overflow: hidden;
}

button {
  color: white;
  border: none;
  background: black;
  position: relative;
  padding: 10px 20px;
  outline:none;
}

button:before, button:after {
  content: '';
  position: absolute;
  display: block;
  width: 50%;
  z-index: -1;
  height: 50%;
  transition: 2s ease;
}

button:before {
  bottom: -1px;
  left: -1px;
  background: radial-gradient(ellipse at 0 100%, white 0%, transparent 80%);
}

button:after {
  top: -1px;
  right: -1px;
  background: radial-gradient(ellipse at 100% 0, white 0%, transparent 80%);
}

button:hover:after, button:hover:before {
  width: 200%;
  height: 200%;
}