woocommerce/docs/ux-guidelines-payments/payment-button-style.md

33 lines
1.3 KiB
Markdown

---
post_title: User Experience Guidelines - Payment Button Style
menu_title: Payment Button Style
---
Use the appropriate button style depending on the site theme.
![Button styles.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Button-styles.png)
### Dark
Use on white or light-color backgrounds. Don't use on black or dark backgrounds.
![Dark.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Dark.png)
### Light
Use on dark-color backgrounds. Don't use on white or light backgrounds.
![Light.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Light.png)
### Light with outline
Use on white or light-color backgrounds that don't provide sufficient contrast. Don't use on dark or saturated backgrounds.
![Light with outline.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Light-with-outline.png)
### Button style and specifications
Buttons should contain the following states for resting, loading, active, and loading contexts. For additional guidance, follow the general Woo accessibility guidelines.
![Button States and specifications](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Button-States-and-specifications.png)