Buttons - Demo School

Home Media And Documents Buttons

Font Size:

Creating Custom Buttons

You can now transform standard website links into professional, color-coded buttons. This is done by adding a simple "tag" to the end of your link text in the editor.

Step 1: Create Your Link

Type the text for your button (e.g., Download Handbook).
Highlight the text and use the Link icon to add your URL.

Step 2: Add the Style Tag

At the end of your link text, add a space, a dash, and the style you want.

Formula: [Button Text] - [Color] [Size] button

Option 1: Solid Buttons

Use these for clear, high-priority actions.

Color Keyword	Size Keyword	Example to type in Editor
primary	small	`Register Now - primary small button`
secondary	medium	`Learn More - secondary medium button`
success (Green)	large	`Apply Today - success large button`
alert (Yellow)	large	`School Closure - alert large button`
danger (Red)	medium	`Delete Application - danger medium button`

Option 2: Outline Buttons

Use these for secondary actions or to make the page feel less "heavy." Just add the word outline before the color.

Example: View Gallery - outline primary medium button
Result: A white button with a blue border that turns solid blue when hovered.

Visual Reference Cheat Sheet

Quick Tips for Success

Spacing is Key: Ensure there is a space before and after the dash (e.g., Text - primary).
One Per Line: These buttons are designed to take up half the width of the page. They work best when placed on their own line, not inside a sentence.
Case Doesn't Matter: You can type - PRIMARY LARGE BUTTON or - primary large button; the system will recognize both.
Automatic Layout: The system will automatically place the button on the left and leave the right side of the row empty to keep your content aligned.

Troubleshooting

The button isn't showing up?

Check that the text is actually a hyperlink (it must be blue/underlined in your editor).
Ensure you included the word "button" at the very end.
Make sure you have the dash "-" before the style name.

Example Buttons

Solid Color Buttons (Standard)

Use these for your main call-to-action items.

Primary Large Button - primary large button

Primary Medium Button - primary medium button

Secondary Medium Button - secondary medium button

Success Large Button - success large button

Alert Medium Button - alert medium button

Danger Small Button - danger small button

Gray Small Button - gray small button

Outline Style Buttons

These are great for "secondary" actions like "Read More" or "View Gallery."

Outline Primary Large Button - outline primary large button

Outline Primary Medium Button - outline primary medium button

Outline Secondary Medium Button - outline secondary medium button

Outline Success Medium Button - outline success medium button

Outline Alert Small Button - outline alert small button

Outline gray Small Button - outline gray small button

Size Comparison Examples

If you want to see how the different sizes look side-by-side:

Large Button - primary large button

Medium Button - primary medium button

Small Button- primary small button

How to Add a Basic Button

Currently, there is no built-in way to add a button to your page. However, you can add buttons using this HTML snippet.

<div class="row no-gutters">
<div class="col-md-6">
<a class="btn btn-primary btn-block btn-lg" href="https://www.ecsd.net">ECSD Website</a>
</div>
<div class="col-md-6">
</div>
</div>

Follow these steps to insert your button.

Copy the text above
In the page editor, click the "Insert HTML" button
Paste the HTML into the box
IMPORTANT - Replace the following:
- Replace "https://www.ecsd.net " > "Your URL" (Do not delete the " " on either side)
- Replace ECSD Website > your button text (Do not remove the > < on either side)
Click the green checkmark to save changes of this snippet. Update the page, and be sure to test clicking the button to make sure it's working as expected.