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.
I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.
On Piccalilli, I share my knowledge and experience to make you a better front-end developer.
I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.