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.

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

Advert