Float Outline Buttons
Two secondary buttons with layered float shadows, a soft top lip and a press-in sink.
Preview and code
index.html
<div class="fo"><button class="fo__b fo__b--s" type="button">Learn more</button><button class="fo__b" type="button">Continue <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></div>
styles.css
.fo{display:flex;gap:16px;align-items:center}
.fo__b{display:inline-flex;align-items:center;gap:8px;padding:16px 26px;border:1px solid rgba(0,0,0,.05);border-radius:16px;background:#fff;color:#171717;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.06),0 6px 14px rgba(0,0,0,.08),0 18px 30px rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease}
.fo__b--s{padding:13px 20px;border-radius:14px;font-size:15px}
.fo__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fo__b:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06)}
.fo__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fo__b{transition:none}}About
A small and a large outline button for secondary calls to action. The lift is three stacked shadows, and pressing swaps them for a tighter one so the button sinks.