Skip to content
PUSD Digital Communications

Button

Standard User

Available to anyone with page-editing access

Clickable button components using Rancho Bernardo 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 (RANCHO BERNARDO HIGH — #2B338E) -->
<a href="#" style="display: inline-block; background-color: #2B338E; 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 #2B338E; cursor: pointer;">Primary Button</a>

Secondary Button

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

Outline Button

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

Button Group

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