250131 - New button motion specs

[ratinsl]

Description

With the introduction of our new motion token framework, we are also beginning to introduce this motion framework to common component behaviors and interactions. The first up is for our button pressed and released states.

Motion tokens ticket here.

This motion spec only applies for: CTA primary, CTA secondary, CTA tertiary buttons, and Branded buttons.

Pointer Enter:

• State Layer / Hover -
  Val: 0% → 100%
  Duration: motion.duration.short.2
  Ease: motion.easing.quick.enter

Pointer Exit:

• State Layer / Hover -
  Val: 100% → 0%
  Duration: motion.duration.short.3
  Ease: motion.easing.quick.enter

Pointer Down:

• Scale -
  Val: (Centered) 100% → 97%
  Duration: motion.duration.short.2
  Ease: motion.easing.quick.enter

• State Layer / Pressed -
  Val: 0% → 100%
  Duration: motion.duration.short.2
  Ease: motion.easing.quick.enter

Pointer Up:

• Scale -
  Val: (Centered) 97% → 100%
  Duration: motion.duration.short.3
  Ease: motion.easing.quick.enter

• State Layer / Pressed-
  Val: 100% → 0%
  Duration: motion.duration.short.3
  Ease: motion.easing.quick.enter

Here is an animated/clickable reference with the hover and pressed states

Video is attached for reference.

Please let us know if you have any questions!
Ryan

Screenshots

250131.Button.motion.specs_1.mp4

Figma link

No response

Engineering pre-requisites

• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).

[ratinsl]

We will be meeting with the Web team to discuss the motion tokens soon, which this ticket relies on.