Sell Theme: Adding Buttons To Your Pages

Learn how to use custom button styles for actions on Pages, dialogs, and more with support for multiple sizes, states, and more.

Using any of the Paragraph UI Elements, start by inserting Source Code examples below or write your own code.

Examples of Button Types

Sell Theme includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Examples of A Hyperlinked Button

When using button classes on<a>elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given arole="button"to appropriately convey their purpose to assistive technologies such as screen readers.

<p>We have some great news! <a class="btn btn-primary" href="/learnmore" role="button">Learn More</a></p>

Examples of A Outlines Button

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

You can style buttons even further using CSS...Learn More

References & More Resources On Buttons

https://getbootstrap.com/docs/4.1/components/buttons/

https://www.w3schools.com/css/css3_buttons.asp