|
| 1 | +<!doctype html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8" /> |
| 5 | +<meta name="viewport" content="width=device-width,initial-scale=1" /> |
| 6 | +<title>Save Button (HTML + CSS)</title> |
| 7 | +<style> |
| 8 | + :root{ |
| 9 | + --bg:#0b74de; |
| 10 | + --bg-dark:#0a63b8; |
| 11 | + --text:#fff; |
| 12 | + --radius:10px; |
| 13 | + --pad:12px 18px; |
| 14 | + } |
| 15 | + |
| 16 | + .save-btn{ |
| 17 | + display:inline-flex; |
| 18 | + gap:10px; |
| 19 | + align-items:center; |
| 20 | + background:linear-gradient(180deg,var(--bg),var(--bg-dark)); |
| 21 | + color:var(--text); |
| 22 | + border:0; |
| 23 | + padding:var(--pad); |
| 24 | + font:600 16px/1.1 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; |
| 25 | + border-radius:var(--radius); |
| 26 | + cursor:pointer; |
| 27 | + box-shadow:0 6px 18px rgba(11,116,222,0.18), inset 0 -2px 0 rgba(255,255,255,0.06); |
| 28 | + transition:transform .08s ease, box-shadow .12s ease, opacity .12s; |
| 29 | + user-select:none; |
| 30 | + } |
| 31 | + |
| 32 | + .save-btn svg{ width:18px; height:18px; flex:0 0 18px; transform:translateY(0); transition:transform .12s ease; } |
| 33 | + |
| 34 | + .save-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(11,116,222,0.18); } |
| 35 | + .save-btn:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,0.12) inset; } |
| 36 | + .save-btn:focus{ outline:3px solid rgba(11,116,222,0.18); outline-offset:3px; } |
| 37 | + |
| 38 | + /* small variant */ |
| 39 | + .save-btn.small{ padding:8px 12px; font-size:14px; border-radius:8px; } |
| 40 | + |
| 41 | + /* disabled appearance (works with disabled attribute) */ |
| 42 | + .save-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; filter:grayscale(.05); } |
| 43 | +</style> |
| 44 | +</head> |
| 45 | +<body style="display:flex;gap:12px;align-items:center;padding:24px;"> |
| 46 | + |
| 47 | +<!-- Normal save button --> |
| 48 | +<button class="save-btn" aria-label="Save"> |
| 49 | + <!-- simple disk/save SVG icon --> |
| 50 | + <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"> |
| 51 | + <path d="M5 4h14v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| 52 | + <path d="M7 4v4h10V4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| 53 | + <path d="M12 11.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="currentColor"/> |
| 54 | + </svg> |
| 55 | + Save |
| 56 | +</button> |
| 57 | + |
| 58 | +<!-- small variant --> |
| 59 | +<button class="save-btn small" aria-label="Save (small)"> |
| 60 | + <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"> |
| 61 | + <path d="M5 4h14v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| 62 | + <path d="M7 4v4h10V4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| 63 | + <path d="M12 11.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="currentColor"/> |
| 64 | + </svg> |
| 65 | + Save |
| 66 | +</button> |
| 67 | + |
| 68 | +<!-- disabled example --> |
| 69 | +<button class="save-btn" disabled aria-label="Save (disabled)"> |
| 70 | + <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"> |
| 71 | + <path d="M5 4h14v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| 72 | + <path d="M7 4v4h10V4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| 73 | + <path d="M12 11.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="currentColor"/> |
| 74 | + </svg> |
| 75 | + Save |
| 76 | +</button> |
| 77 | + |
| 78 | +</body> |
| 79 | +</html> |
0 commit comments