<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.