Buttons

Nexgen provides two ready-made button styles you apply with a single class. Both pick up your --primary-color, so they stay on-brand automatically when you change your palette.

Primary

A solid, filled button for your main call to action.

<a href="#your-link" class="primary-button">Get Started</a>

Use primary-button for the single most important action in a section — “Contact us”, “Buy now”, “Get a quote”.

Outlined

A transparent button with a colored outline, for secondary actions.

<a href="#your-link" class="outlined-button">Learn More</a>

Use outlined-button next to a primary button when you want a lighter-weight, secondary option.

Pair them for hierarchy

A common, effective pattern is one primary button beside one outlined button — the filled one draws the eye to the main action while the outlined one offers an alternative without competing.

Next: IconsAdd icons from Simple Line Icons and Font Awesome.