SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-depth-ring-button
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Optional CTA button variant. Visible Depth navy gradient fill with Foundry orange text and a 1.5px orange ring. Keeps the orange visible while staying rule-compliant (orange is text and border, never a fill). Hover flips the text to white. For light sections.
When to use
When you want the orange to read on a CTA button but cannot use an orange fill. Light sections only (the dark gradient needs a light background for separation). Secondary to sa-depth-button.
Source skill
Rules (one per line, leading dash optional)
Orange appears only as text and a 1.5px border, never as a fill. White hover text carries !important. Use on light sections only. Label is always Call Now; phone in tel: href only. Uppercase + centered.
Live reference URL
Deployment notes
Background, color and border use !important. SVG fill:currentColor so the icon tracks the text color through hover. Do not place on a navy/dark section, use sa-depth-button .on-dark there.
HTML
<!-- SA Depth Ring Button (optional variant). For LIGHT sections only. --> <!-- Navy depth gradient fill, Foundry orange text + 1.5px orange ring. --> <a class="sa-depth-ring-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>
CSS
.sa-depth-ring-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:#D97706 !important; /* orange TEXT (allowed) */ border:1.5px solid #D97706 !important; /* orange ring (allowed border) */ box-shadow:0 6px 18px rgba(11,33,45,.28); transition:color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease; } .sa-depth-ring-btn svg{fill:currentColor;} .sa-depth-ring-btn:hover,.sa-depth-ring-btn:focus-visible{ color:#FFFFFF !important; /* hover flips text to white */ box-shadow:0 10px 26px rgba(11,33,45,.36); transform:translateY(-2px); } body{background:#fff;padding:50px;text-align:center;}
Save changes
Cancel