Skip to content
PUSD Digital Communications

Button

Standard User

Available to anyone with page-editing access

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

Primary Button

Section titled “Primary Button”
<!-- PRIMARY BUTTON (POWAY TO PALOMAR — #c00000) -->
<a href="#" style="display: inline-block; background-color: #c00000; 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 #c00000; cursor: pointer;">Primary Button</a>

Secondary Button

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

Accent Button

Section titled “Accent Button”
<!-- ACCENT BUTTON (POWAY TO PALOMAR — #e3e4e5) -->
<a href="#" style="display: inline-block; background-color: #e3e4e5; 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 (POWAY TO PALOMAR — #c00000 border) -->
<a href="#" style="display: inline-block; background-color: transparent; color: #c00000; 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 #c00000; cursor: pointer;">Outline Button</a>

Button Group

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