Button styles help customize your site's visual appearance and create consistent call-to-action elements across your website. Here's a comprehensive guide to configuring button settings effectively.

Button Types and Hierarchy

Primary buttons are used for main actions like:

• Add to Cart buttons
• Checkout buttons
• Newsletter signups
• Donation forms
• Member registration

Secondary buttons serve supporting functions:

• Continue Shopping links
• Alternative header actions
• Secondary call-to-action elements

Tertiary buttons are used for less prominent actions like:

• Cookie management
• Additional navigation options

Customizing Button Appearance

Shape and Style Options:

• Filled (solid background color)
• No Fill (outlined appearance)
• Custom outline thickness
• Adjustable padding (left, right, top, bottom)
• Maximum recommended text length: 25 characters

Text Customization:

• Font selection
• Font style modifications
• Text color options
• Size adjustments

Color Settings:

• Background colors follow site's global theme
• Text colors can be customized
• Hover state colors
• Section-specific color themes available

Important Considerations:

• Preview changes on a page with buttons to see real-time updates
• Changes apply site-wide for consistency
• Button sizes automatically adjust to accommodate text length
• Some buttons may have restricted customization to maintain design integrity
• Settings can be copied across button types using "Apply to All Button Types"
• Individual reset options available per button type

Version 7.0 Specific Settings:

Style Options:

• Solid
• Outline
• Top Aligned

Shape Choices:

• Square
• Round
• Capsule

Additional Controls:

• Background color
• Text color
• Font selection
• Alternative/Overlay colors for specific backgrounds

Best Practices:

1. Maintain consistent styling across similar actions
2. Ensure sufficient contrast between button and background
3. Keep button text concise and clear
4. Test appearance across different screen sizes
5. Consider hover states and user interaction
6. Use hierarchy to guide user attention

This comprehensive approach to button styling helps create a cohesive, professional appearance while maintaining optimal user experience across your website.

Related Articles

Previous Articles