Prerequisites

• Colours and typography already set up.

Navigation steps

1. Navigate to CMS → Site Options → Buttons Tab.
2. For each button you want to add
   • Click ‘Add new button style’. 
   • Enter a Button Name to identify its purpose.
   • Under Styling Options, configure the following:
     1. Background Colour
     2. Text Colour
     3. Border Colour
     4. Font Size
     5. Font Weight
     6. Font Family
     7. Vertical & Horizontal Padding
     8. Border Radius
     9. Border Width
     10. Shadow (Elevation): Toggle on/off for depth effect.
     11. Transparent (Outlined): Enable an outlined button.
     12. Under Hover & Focus Effects: Adjust the Background Colour and Text Colour for interaction.
   • Click ‘Save Changes’ to apply your new button style.
3. Click the Update button at the top right of the page to finalise.

Best Practices & Use Cases

Maintain Brand Consistency

Ensure that the colours chosen align with your overall branding guidelines. Consistent use of primary, secondary, and accent colours can reinforce your brand identity.

Keep Consistency

Use similar button styles for a cohesive interface.

Use Existing Typography Settings

Ensure font weight is selected from the predefined typography settings for design consistency.

FAQs & Troubleshooting

Why aren’t my button changes showing up immediately?

If your changes are not appearing right away, it may be due to caching. Clear your browser cache, and your WordPress cache.