sa-depth-button v2026-06-10
Primary call-to-action button. Visible Depth navy gradient fill with white text (never an orange fill). On light sections it renders navy with white text; on dark/navy sections add .on-dark for the inverted white-background / navy-text version so the button is never navy-on-navy. Hover turns the text Foundry orange.
Source skill: sa-design-elements · Updated 2026-06-15 13:12:00
When to use
Any primary CTA button. Use the default on light/white sections. Add the .on-dark class when the button sits on a navy or Visible Depth section. Replaces all orange-fill buttons.
Rules & constraints
- No orange background fills, ever. Foundry #D97706 appears only as hover text/border. White text carries color:#FFFFFF !important so legacy sitewide CSS cannot flip it dark. Hover state turns white text orange. On dark sections use .on-dark (white bg, navy text) to avoid navy-on-navy. Button label is always Call Now (or Get Started for form submits); phone lives in the tel: href only. Text is uppercase + centered.
- Replaces the legacy .sa-cta-btn everywhere (pre-publish-qa fails on class="sa-cta-btn"). On bottom-CTA banners (sa-cta-image-banner #21) use .on-dark; include the phone icon only for tel: call buttons, omit it for non-call CTAs.
Live reference
https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/
Deployment notes
Apply background, color, and border with !important. Keep transition on color/box-shadow/transform. SVG uses fill:currentColor so the phone icon recolors with the text on hover. Pair with the inverted .on-dark modifier on navy sections.
HTML
<!-- SA Visible Depth Button. Primary CTA across the site. -->
<!-- DEFAULT (use on LIGHT sections): navy depth gradient + white text. -->
<a class="sa-depth-btn" href="tel:+15028888888"><svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.4 2.2z"/></svg><span>Call Now</span></a>
<!-- INVERTED (use on DARK / navy sections so the button is not navy-on-navy): -->
<!-- add the .on-dark class to the SAME button. -->
<div style="background:#0B212D;padding:34px;border-radius:14px;margin-top:26px;display:flex;justify-content:center;">
<a class="sa-depth-btn on-dark" href="tel:+15028888888"><svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.4 2.2z"/></svg><span>Call Now</span></a>
</div>CSS
.sa-depth-btn{
display:inline-flex;align-items:center;gap:10px;
font-family:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
font-weight:700;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.4px;
text-decoration:none;padding:16px 36px;border-radius:999px;cursor:pointer;
background:linear-gradient(0deg,#000000 0%,#0B212D 100%) !important;
color:#FFFFFF !important; /* forced white so theme cannot darken it */
border:1px solid rgba(255,255,255,.10);
box-shadow:0 6px 18px rgba(11,33,45,.28);
transition:color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sa-depth-btn svg{fill:currentColor;}
/* hover: white text turns Foundry orange */
.sa-depth-btn:hover,.sa-depth-btn:focus-visible{
color:#D97706 !important;
box-shadow:0 10px 26px rgba(11,33,45,.36);
transform:translateY(-2px);
}
/* INVERTED variant for DARK sections (white bg, navy text) */
.sa-depth-btn.on-dark{
background:#FFFFFF !important;
color:#0B212D !important;
border:2px solid #FFFFFF !important;
box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.sa-depth-btn.on-dark:hover,.sa-depth-btn.on-dark:focus-visible{
background:linear-gradient(0deg,#000000 0%,#0B212D 100%) !important;
color:#D97706 !important;
border-color:#D97706 !important;
}
/* demo page bg */
body{background:#fff;padding:50px;text-align:center;}