From Bottom
 
	<style> 
		*,
		*: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;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 Bottom */

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

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

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

		.from-bottom:hover:before,
		.from-bottom:hover:after {height: 100%;}
    </style>
<div class="btn2"> <div class="btn1 from-bottom">From Bottom</div> </div>