SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-depth-button
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
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.
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.
Source skill
Rules (one per line, leading dash optional)
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 URL
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;}
Save changes
Cancel