CTA button
v3.1
CTA buttons present the primary actions within a flow to help guide users through experiences.
Hover State
Pointer Enter
State layer is color.stateLayer.hover
- State Layer
0% → 100%
- Duration
motion.duration.short.2
- Ease
motion.easing.soft.enter
Pointer Exit
State layer is color.stateLayer.hover
- State Layer
100% → 0%
- Duration
motion.duration.short.3
- Easing
motion.easing.soft.exit
Button Scaling
Pointer Down
If button is held down, remain in pointer down state and then play pointer up on release.
If button is clicked/released immediately, play full animation.
- Scale
(Centered) 100% → 97%
- Duration
motion.duration.short.3
- Easing
motion.easing.quick.enter
- State Layer
0% → 100%
- Duration
motion.duration.short.2
- Easing
motion.easing.soft.enter
Pointer Up
- Scale
(Centered) 97% → 100%
- Duration
motion.duration.medium.2
- Easing
motion.easing.standard
- State Layer
100% → 0%
- Duration
motion.duration.short.3
- Easing
motion.easing.soft.exit