<style> 
	/* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */

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

	.btn2 {	--def: rgb(255, 255, 255);	--inv: rgb(0, 0, 0);display: flex;	justify-content: center;align-items: center;flex-direction: column;	height: 100px;background-color: rgb(255, 255, 255);}

	/* ~~~~~~~ INIT. BTN ~~~~~~~ */

	.btn1 {	position: absolute;	padding: 1.4rem 4.2rem;	padding-right: 3.1rem;font-size: 1.4rem;color: var(--inv);letter-spacing: 1.1rem;text-transform: uppercase;transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);cursor: pointer;user-select: none;z-index: 1;}

	.btn1:before,
	.btn1:after {content: '';position: absolute;transition: inherit;z-index: -1;}

	.btn1:hover {color: var(--def);	transition-delay: .6s;}

	.btn1:hover:before {transition-delay: 0s;}

	.btn1:hover:after {	background: var(--inv);	transition-delay: .4s;}

	.from-middle:before {top: 0;left: 50%;height: 100%;width: 0;border: 1px solid var(--inv);border-left: 0;border-right: 0;}

	.from-middle:after {bottom: 0;left: 0;height: 0;width: 100%;background: var(--inv);}

	.from-middle:hover:before {	left: 0;width: 100%;}

	.from-middle:hover:after {top: 0;height: 100%;}
    </style>

<div class="btn2"> <div class="btn1 from-middle">From Middle</div> </div>