Skip to content
PUSD Digital Communications

Button

Standard User

Available to anyone with page-editing access

Clickable button components using Shoal Creek brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Primary Button

Section titled “Primary Button”
<!-- PRIMARY BUTTON (SHOAL CREEK — #1AB5E9) -->
<a href="#" style="display: inline-block; background-color: #1AB5E9; color: #1a1a1a; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; text-align: center; transition: background-color 0.3s ease; border: 2px solid #1AB5E9; cursor: pointer;">Primary Button</a>

Secondary Button

Section titled “Secondary Button”
<!-- SECONDARY BUTTON (SHOAL CREEK — #F79226) -->
<a href="#" style="display: inline-block; background-color: #F79226; color: #1a1a1a; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; text-align: center; transition: background-color 0.3s ease; border: 2px solid rgba(0,0,0,0.2); cursor: pointer;">Secondary Button</a>

Accent Button

Section titled “Accent Button”
<!-- ACCENT BUTTON (SHOAL CREEK — #392814) -->
<a href="#" style="display: inline-block; background-color: #392814; color: #ffffff; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; text-align: center; transition: background-color 0.3s ease; border: 2px solid #392814; cursor: pointer;">Accent Button</a>

Outline Button

Section titled “Outline Button”
<!-- OUTLINE BUTTON (SHOAL CREEK — #1AB5E9 border) -->
<a href="#" style="display: inline-block; background-color: transparent; color: #1AB5E9; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; text-align: center; transition: all 0.3s ease; border: 2px solid #1AB5E9; cursor: pointer;">Outline Button</a>

Button Group

Section titled “Button Group”
<!-- BUTTON GROUP (SHOAL CREEK) -->
<div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
    <a href="#" style="display: inline-block; background-color: #1AB5E9; color: #1a1a1a; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; text-align: center; transition: background-color 0.3s ease; border: 2px solid #1AB5E9; cursor: pointer;">Primary</a>
    <a href="#" style="display: inline-block; background-color: transparent; color: #1AB5E9; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; text-align: center; transition: all 0.3s ease; border: 2px solid #1AB5E9; cursor: pointer;">Learn More</a>
</div>