sa-depth-ring-button v2026-06-03
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.
Source skill: sa-design-elements · Updated 2026-06-03 04:01:12
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.
Rules & constraints
- 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
https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/
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;}