<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 Top */

	.from-top:before,
	.from-top:after {left: 0;height: 0;width: 100%;}

	.from-top:before {bottom: 0;border: 1px solid var(--inv);border-top: 0;border-bottom: 0;}

	.from-top:after {top: 0;height: 0;}

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

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