/* HTML */
<a href="#"><button class="button-18">Hover me</button></a>

/* CSS */
.button-18 {
 --color: #560bad;
 font-family: inherit;
 display: inline-block;
 width: 8em;
 height: 2.6em;
 line-height: 2.5em;
 margin: 20px;
 position: relative;
 overflow: hidden;
 border: 2px solid var(--color);
 transition: color .5s;
 z-index: 1;
 font-size: 17px;
 border-radius: 6px;
 font-weight: 500;
 color: var(--color);
}

.button-18:before {
 content: "";
 position: absolute;
 z-index: -1;
 background: var(--color);
 height: 150px;
 width: 200px;
 border-radius: 50%;
}

.button-18:hover {
 color: #fff;
}

.button-18:before {
 top: 100%;
 left: 100%;
 transition: all .7s;
}

.button-18:hover:before {
 top: -30px;
 left: -30px;
}

.button-18:active:before {
 background: #3a0ca3;
 transition: background 0s;
}