Skip to content
PUSD Digital Communications

Button

Standard User

Available to anyone with page-editing access

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

Primary Button

Section titled “Primary Button”
<!-- PRIMARY BUTTON (MT. CARMEL HIGH — #2F63DD) -->
<a href="#" style="display: inline-block; background-color: #2F63DD; 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 #2F63DD; cursor: pointer;">Primary Button</a>

Secondary Button

Section titled “Secondary Button”
<!-- SECONDARY BUTTON (MT. CARMEL HIGH — #FFB81C) -->
<a href="#" style="display: inline-block; background-color: #FFB81C; 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 (MT. CARMEL HIGH — #FFFFFF) -->
<a href="#" style="display: inline-block; background-color: #FFFFFF; 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;">Accent Button</a>

Outline Button

Section titled “Outline Button”
<!-- OUTLINE BUTTON (MT. CARMEL HIGH — #2F63DD border) -->
<a href="#" style="display: inline-block; background-color: transparent; color: #2F63DD; 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 #2F63DD; cursor: pointer;">Outline Button</a>

Button Group

Section titled “Button Group”
<!-- BUTTON GROUP (MT. CARMEL HIGH) -->
<div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
    <a href="#" style="display: inline-block; background-color: #2F63DD; 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 #2F63DD; cursor: pointer;">Primary</a>
    <a href="#" style="display: inline-block; background-color: transparent; color: #2F63DD; 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 #2F63DD; cursor: pointer;">Learn More</a>
</div>