Snippet 1 : Hover Effect Button – 1

Snippet CSS berikut adalah animasi rotasi dengan mengubah background color pada button.

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

a {
	text-decoration: none;
	color: #262626;
	font-family: sans-serif;
	font-size: 30px;
	border: 5px solid #262626;
	padding: 40px 80px;
	position: relative;
	overflow: hidden;
}

a:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff200;
	height: 100%;
	width: 100%;
	z-index: -1;
	transform-origin: bottom left;
 	transform: rotate(-90deg);
	transition: transform 1s;
}

a:hover:before {
	transform: rotate(0deg);
}

Silakan bereksperimen dengan mengubah transform origin, warna atau pun transition property untuk mendapatkan efek yang berbeda.