JSFiddle - React, Tailwind, and code Playground

HTML

<div class= "category_item">
        
    <div class= "cat_button">
         <span class="title_cat">TEXT</span>
    </div>
        
</div>

CSS

.category_item {
    position: absolute;
	background-color: #999;
	top: 100px;
    left: 50px;
	width: 200px;
	height: 200px;
	cursor: pointer;
    
    -webkit-animation: easeBack-reversed 0.215s ease-in-out forwards;
    animation: easeBack-reversed 0.215s ease-in-out forwards;
}

.category_item:hover {
	-webkit-animation: easeBack 1s ease-in-out forwards;
    animation: easeBack 1s ease-in-out forwards;
}

@-webkit-keyframes easeBack {
	0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-50px);
				transform: translateY(-50px);
		
	}
	100% {
		-webkit-transform: translateY(-30px);
				transform: translateY(-30px);
	}
}

@-webkit-keyframes easeBack-reversed {
	0% {
		-webkit-transform: translateY(-30px);
				transform: translateY(-30px);
	}
	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}

.cat_button {
	position: absolute;
    width: 200px;
	height: 55px;
	bottom: 0;
	border: 2px solid #fff;
	color: #fff;
	-webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
	transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
}

.category_item:hover .cat_button {
	background: #fff;
	border-color: #fff;
	color: #511c5b;
}