Skip to content
PUSD Digital Communications

Button

Standard User

Available to anyone with page-editing access

Clickable button components using Del Norte 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 (DEL NORTE HIGH — #002147) -->
<a href="#" style="display: inline-block; background-color: #002147; 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 #002147; cursor: pointer;">Primary Button</a>

Secondary Button

Section titled “Secondary Button”
<!-- SECONDARY BUTTON (DEL NORTE HIGH — #91976C) -->
<a href="#" style="display: inline-block; background-color: #91976C; 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 #91976C; cursor: pointer;">Secondary Button</a>

Accent Button

Section titled “Accent Button”
<!-- ACCENT BUTTON (DEL NORTE HIGH — #154734) -->
<a href="#" style="display: inline-block; background-color: #154734; 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 #154734; cursor: pointer;">Accent Button</a>

Outline Button

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

Button Group

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