💡 NXG Button Style Guide

You can easily style buttons using the following parent classes. These classes are applied to the wrapper (not the button itself) for consistent design.

🎨 Available Button Styles

Class Name	Description	Example
nxg-btn-solid	Solid purple button with white text	🟪 Primary CTA
nxg-btn-outline	Transparent button with purple border and text	🟣 Outline CTA
nxg-btn-outline-white	White outline and text (for dark backgrounds)	⚪ Outline White
nxg-btn-big	Increases button size — can be combined with any style	➕ Big Size

🧩 How to Use

1. Edit your page in Beaver Builder or your preferred editor.
2. Locate the Button module you want to style.
3. Wrap the button inside a parent div and assign the desired class.

Example (Solid Button):

<div class="nxg-btn-solid">
  <div class="fl-button-wrap">
    <a class="fl-button" href="#">Start Free Trial</a>
  </div>
</div>

Example (Big Outline Button):

<div class="nxg-btn-outline nxg-btn-big">
  <div class="fl-button-wrap">
    <a class="fl-button" href="#">Learn More</a>
  </div>
</div>

✨ Hover Effect

• Background changes to dark purple (#321F65)
• Text turns white
• Soft shadow appears for depth