<div>
	<button type="button">Hover Hold Release!</button>
</div>
button {
	// 	Reset styling
	-webkit-appearance: none;
	background: none;
	border: none;

	background-color: #123456;
	padding: 1.25rem 1.5rem;
	border-radius: 0.25rem;
	color: white;

	// 	Animation
	transition: transform 150ms ease-out;
}

button:hover {
	transform: scale(1.1);
}
button:active {
	transform: scale(0.9);
}

// This centers the button
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.