Squash and Stretch

Disney's animators wrote down twelve principles of animation. The first one, squash and stretch, is the one I think about most when building interfaces.

The idea

Things in the real world deform when they move. A ball squashes when it hits the floor and stretches as it falls. Crucially, its volume stays the same: what it loses in height, it gains in width.

Applying it to a button

.btn:active {
  transform: scale(1.04, 0.94);
  transition: transform 80ms;
}

Subtle is the whole trick. If someone notices the squash, it's too much.

Keep the volume

If you scale X up by 4%, scale Y down by roughly the same. Otherwise the element looks like it's inflating, not squishing.