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.

Demo

If you liked this post, you might like these ones, too

  1. CUBE CSS

    A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

    Continue
  2. CSS Logical Properties

    Create spacing that works regardless of the direction of your content or the environment of your users.

    Continue
  3. Create a line break while maintaining inline status

    🔥 A handy quick tip.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.