Save Bookmark Button
A square-ish Save button: the bookmark fills amber, the card turns cream and the label swaps to Saved.
Preview and code
index.html
<button class="bm" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4h12v17l-6-4-6 4z"/></svg><span class="bm__t">Save</span></button>
styles.css
.bm{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid #e5e5e5;border-radius:12px;background:#fff;color:#262626;font:500 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 18px rgba(0,0,0,.07);transition:background-color .2s ease,border-color .2s ease,transform .12s ease}
.bm svg{width:18px;height:18px;fill:none;stroke:#737373;stroke-width:2;stroke-linejoin:round;transition:fill .2s ease,stroke .2s ease}
.bm:active{transform:translateY(1px)}
.bm[aria-pressed=true]{background:#fffbeb;border-color:#fde7a8}
.bm[aria-pressed=true] svg{fill:#f59e0b;stroke:#f59e0b}
.bm:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
script.js
const b=document.querySelector('.bm'),t=b.querySelector('.bm__t');
b.addEventListener('click',()=>{const on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',on);t.textContent=on?'Saved':'Save';});About
Toggle button for articles and products. aria-pressed tracks the state, so screen readers hear Saved or Save.