JSFiddle - React, Tailwind, and code Playground

by Garavani

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;
	/* seems to be overwriten by animation keyframes */
	-webkit-transition: -webkit-transform 0.215s ease-in-out;
			transition: transform 0.215s ease-in-out;
	cursor: pointer;
}

.category_item:hover {
	-webkit-animation-name: easeBack;
			animation-name: easeBack;
	-webkit-animation-duration: 1s;
			animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: 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);
	}
}	

.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;
}