Squishy button active state

Categories

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.

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me