Squishy button active state

Making your buttons feel “pressed” is a handy trick that you can do with 1 line of CSS. Using transform, we can scale the button to be 99% of its size, when it is :active, which gives it that “pressed” feel.

Code language
CSS
.button:active {
transform: scale(0.95);
}

You could even take it one step further and apply skew with transform. This effect could be applied to all sorts of interactive elements, too.

Demo permalink

See the Pen Squishy button active state by Andy Bell (@andybelldesign) on CodePen.