|$ curl https://forge-ai.dev/api/markdown?path=docs/components/buttons
$cat docs/buttons.md
updated Recently·18 min read·published
Buttons
Introduction
Buttons are the most interactive element in any UI. This guide covers production-ready button patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including variants, sizes, states, groups, loading, and accessibility.
ℹ
info
Always use <button type="button"> for non-submit actions to prevent accidental form submissions. For icon-only buttons, provide an aria-label.
Variants
Primary, secondary, outline, ghost, and danger — five variants covering every use case.
variants
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn btn-primary"> |
| 3 | Primary |
| 4 | </button> |
| 5 | <button class="btn btn-secondary"> |
| 6 | Secondary |
| 7 | </button> |
| 8 | <button class="btn btn-outline"> |
| 9 | Outline |
| 10 | </button> |
| 11 | <button class="btn btn-ghost"> |
| 12 | Ghost |
| 13 | </button> |
| 14 | <button class="btn btn-danger"> |
| 15 | Delete |
| 16 | </button> |
| 17 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:12px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:32px |
| 8 | } |
| 9 | .btn { |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | gap:6px; |
| 13 | padding:10px 20px; |
| 14 | border-radius:8px; |
| 15 | font-size:13px; |
| 16 | font-weight:600; |
| 17 | font-family:system-ui, |
| 18 | sans-serif; |
| 19 | cursor:pointer; |
| 20 | border:none; |
| 21 | transition:all .2s ease; |
| 22 | line-height:1 |
| 23 | } |
| 24 | .btn:hover { |
| 25 | transform:translateY(-1px); |
| 26 | box-shadow:0 4px 12px rgba(0, |
| 27 | 0, |
| 28 | 0, |
| 29 | .3) |
| 30 | } |
| 31 | .btn-primary { |
| 32 | background:#00FF41; |
| 33 | color:#0A0A0A |
| 34 | } |
| 35 | .btn-primary:hover { |
| 36 | background:#00E63A |
| 37 | } |
| 38 | .btn-secondary { |
| 39 | background:#1A1A2E; |
| 40 | color:#E0E0E0; |
| 41 | border:1px solid #2A2A3E |
| 42 | } |
| 43 | .btn-secondary:hover { |
| 44 | background:#22223A; |
| 45 | border-color:#3A3A4E |
| 46 | } |
| 47 | .btn-outline { |
| 48 | background:transparent; |
| 49 | color:#00FF41; |
| 50 | border:1.5px solid #00FF41 |
| 51 | } |
| 52 | .btn-outline:hover { |
| 53 | background:rgba(0, |
| 54 | 255, |
| 55 | 65, |
| 56 | .08) |
| 57 | } |
| 58 | .btn-ghost { |
| 59 | background:transparent; |
| 60 | color:#A0A0A0; |
| 61 | border:1.5px solid transparent |
| 62 | } |
| 63 | .btn-ghost:hover { |
| 64 | background:rgba(255, |
| 65 | 255, |
| 66 | 255, |
| 67 | .05); |
| 68 | color:#E0E0E0 |
| 69 | } |
| 70 | .btn-danger { |
| 71 | background:#EF4444; |
| 72 | color:#fff |
| 73 | } |
| 74 | .btn-danger:hover { |
| 75 | background:#DC2626 |
| 76 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-3 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] hover:-translate-y-0.5 hover:shadow-lg transition-all"> |
| 3 | Primary |
| 4 | </button> |
| 5 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E] hover:bg-[#22223A] hover:border-[#3A3A4E] hover:-translate-y-0.5 hover:shadow-lg transition-all"> |
| 6 | Secondary |
| 7 | </button> |
| 8 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-transparent text-[#00FF41] border-[1.5px] border-[#00FF41] hover:bg-[rgba(0,255,65,0.08)] hover:-translate-y-0.5 hover:shadow-lg transition-all"> |
| 9 | Outline |
| 10 | </button> |
| 11 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-transparent text-[#A0A0A0] border-[1.5px] border-transparent hover:bg-white/5 hover:text-[#E0E0E0] hover:-translate-y-0.5 transition-all"> |
| 12 | Ghost |
| 13 | </button> |
| 14 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#EF4444] text-white hover:bg-[#DC2626] hover:-translate-y-0.5 hover:shadow-lg transition-all"> |
| 15 | Delete |
| 16 | </button> |
| 17 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4"> |
| 2 | <button class="btn btn-success fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A;--bs-btn-hover-border-color:#00E63A"> |
| 3 | Primary |
| 4 | </button> |
| 5 | <button class="btn btn-dark fw-semibold border-secondary"> |
| 6 | Secondary |
| 7 | </button> |
| 8 | <button class="btn btn-outline-success fw-semibold" style="--bs-btn-color:#00FF41;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:rgba(0,255,65,0.08);--bs-btn-hover-border-color:#00FF41;--bs-btn-hover-color:#00FF41"> |
| 9 | Outline |
| 10 | </button> |
| 11 | <button class="btn btn-outline-dark fw-semibold text-secondary border-0"> |
| 12 | Ghost |
| 13 | </button> |
| 14 | <button class="btn btn-danger fw-semibold"> |
| 15 | Delete |
| 16 | </button> |
| 17 | </div> |
Sizes
From tiny to massive — choose the right size for your layout.
sizes
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn sm"> |
| 3 | Small |
| 4 | </button> |
| 5 | <button class="btn md"> |
| 6 | Default |
| 7 | </button> |
| 8 | <button class="btn lg"> |
| 9 | Large |
| 10 | </button> |
| 11 | <button class="btn xl"> |
| 12 | X-Large |
| 13 | </button> |
| 14 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:12px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:32px |
| 8 | } |
| 9 | .btn { |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | gap:6px; |
| 13 | border-radius:6px; |
| 14 | font-weight:600; |
| 15 | font-family:system-ui, |
| 16 | sans-serif; |
| 17 | cursor:pointer; |
| 18 | border:none; |
| 19 | transition:all .2s ease; |
| 20 | line-height:1; |
| 21 | background:#00FF41; |
| 22 | color:#0A0A0A |
| 23 | } |
| 24 | .btn:hover { |
| 25 | transform:translateY(-1px); |
| 26 | box-shadow:0 4px 12px rgba(0, |
| 27 | 0, |
| 28 | 0, |
| 29 | .3) |
| 30 | } |
| 31 | .sm { |
| 32 | padding:4px 10px; |
| 33 | font-size:10px; |
| 34 | border-radius:4px |
| 35 | } |
| 36 | .md { |
| 37 | padding:8px 16px; |
| 38 | font-size:12px; |
| 39 | border-radius:6px |
| 40 | } |
| 41 | .lg { |
| 42 | padding:12px 24px; |
| 43 | font-size:14px; |
| 44 | border-radius:8px |
| 45 | } |
| 46 | .xl { |
| 47 | padding:18px 36px; |
| 48 | font-size:18px; |
| 49 | border-radius:12px |
| 50 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-3 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <button class="px-2.5 py-1 rounded text-[10px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 3 | Small |
| 4 | </button> |
| 5 | <button class="px-4 py-2 rounded-md text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 6 | Default |
| 7 | </button> |
| 8 | <button class="px-6 py-3 rounded-lg text-sm font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 9 | Large |
| 10 | </button> |
| 11 | <button class="px-9 py-4 rounded-xl text-lg font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 12 | X-Large |
| 13 | </button> |
| 14 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4"> |
| 2 | <button class="btn btn-success btn-sm fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 3 | Small |
| 4 | </button> |
| 5 | <button class="btn btn-success fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 6 | Default |
| 7 | </button> |
| 8 | <button class="btn btn-success btn-lg fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 9 | Large |
| 10 | </button> |
| 11 | </div> |
Shapes
Rounded pills, squares, and circles for different contexts.
shapes
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn primary pill"> |
| 3 | Pill |
| 4 | </button> |
| 5 | <button class="btn primary square"> |
| 6 | S |
| 7 | </button> |
| 8 | <button class="btn secondary circle" aria-label="Add"> |
| 9 | + |
| 10 | </button> |
| 11 | <button class="btn outline pill"> |
| 12 | Outline Pill |
| 13 | </button> |
| 14 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:12px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:32px |
| 8 | } |
| 9 | .btn { |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | justify-content:center; |
| 13 | gap:6px; |
| 14 | padding:10px 20px; |
| 15 | font-size:13px; |
| 16 | font-weight:600; |
| 17 | font-family:system-ui, |
| 18 | sans-serif; |
| 19 | cursor:pointer; |
| 20 | border:none; |
| 21 | transition:all .2s ease; |
| 22 | line-height:1 |
| 23 | } |
| 24 | .btn:hover { |
| 25 | transform:translateY(-1px); |
| 26 | box-shadow:0 4px 12px rgba(0, |
| 27 | 0, |
| 28 | 0, |
| 29 | .3) |
| 30 | } |
| 31 | .pill { |
| 32 | border-radius:999px |
| 33 | } |
| 34 | .square { |
| 35 | border-radius:6px; |
| 36 | width:38px; |
| 37 | height:38px; |
| 38 | padding:0 |
| 39 | } |
| 40 | .circle { |
| 41 | border-radius:50%; |
| 42 | width:38px; |
| 43 | height:38px; |
| 44 | padding:0; |
| 45 | font-size:20px |
| 46 | } |
| 47 | .primary { |
| 48 | background:#00FF41; |
| 49 | color:#0A0A0A |
| 50 | } |
| 51 | .primary:hover { |
| 52 | background:#00E63A |
| 53 | } |
| 54 | .secondary { |
| 55 | background:#1A1A2E; |
| 56 | color:#E0E0E0; |
| 57 | border:1px solid #2A2A3E |
| 58 | } |
| 59 | .secondary:hover { |
| 60 | background:#22223A |
| 61 | } |
| 62 | .outline { |
| 63 | background:transparent; |
| 64 | color:#00FF41; |
| 65 | border:1.5px solid #00FF41 |
| 66 | } |
| 67 | .outline:hover { |
| 68 | background:rgba(0, |
| 69 | 255, |
| 70 | 65, |
| 71 | .08) |
| 72 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-3 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <button class="px-5 py-2.5 rounded-full text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] hover:-translate-y-0.5 transition-all"> |
| 3 | Pill |
| 4 | </button> |
| 5 | <button class="w-10 h-10 rounded-md text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 6 | S |
| 7 | </button> |
| 8 | <button aria-label="Add" class="w-10 h-10 rounded-full text-xl font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E] hover:bg-[#22223A] transition-all"> |
| 9 | + |
| 10 | </button> |
| 11 | <button class="px-5 py-2.5 rounded-full text-[13px] font-semibold bg-transparent text-[#00FF41] border-[1.5px] border-[#00FF41] hover:bg-[rgba(0,255,65,0.08)] transition-all"> |
| 12 | Outline Pill |
| 13 | </button> |
| 14 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4"> |
| 2 | <button class="btn btn-success rounded-pill fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 3 | Pill |
| 4 | </button> |
| 5 | <button class="btn btn-success fw-semibold" style="width:38px;height:38px;--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 6 | S |
| 7 | </button> |
| 8 | <button aria-label="Add" class="btn btn-dark rounded-circle fw-semibold border-secondary" style="width:38px;height:38px"> |
| 9 | + |
| 10 | </button> |
| 11 | </div> |
With Icons
Icon + label buttons and compact icon-only buttons. SVG icons scale and inherit color.
icons
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn primary"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 4 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 5 | </svg> |
| 6 | Send |
| 7 | </button> |
| 8 | <button class="btn secondary"> |
| 9 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 10 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| 11 | <polyline points="7 10 12 15 17 10"/> |
| 12 | <line x1="12" y1="15" x2="12" y2="3"/> |
| 13 | </svg> |
| 14 | Download |
| 15 | </button> |
| 16 | <button class="icon-btn" aria-label="Settings"> |
| 17 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 18 | <circle cx="12" cy="12" r="3"/> |
| 19 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 20 | </svg> |
| 21 | </button> |
| 22 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:12px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:32px |
| 8 | } |
| 9 | .btn { |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | gap:8px; |
| 13 | padding:10px 20px; |
| 14 | border-radius:8px; |
| 15 | font-size:13px; |
| 16 | font-weight:600; |
| 17 | font-family:system-ui, |
| 18 | sans-serif; |
| 19 | cursor:pointer; |
| 20 | border:none; |
| 21 | transition:all .2s; |
| 22 | line-height:1 |
| 23 | } |
| 24 | .btn:hover { |
| 25 | transform:translateY(-1px); |
| 26 | box-shadow:0 4px 12px rgba(0, |
| 27 | 0, |
| 28 | 0, |
| 29 | .3) |
| 30 | } |
| 31 | .btn svg { |
| 32 | flex-shrink:0 |
| 33 | } |
| 34 | .primary { |
| 35 | background:#00FF41; |
| 36 | color:#0A0A0A |
| 37 | } |
| 38 | .primary:hover { |
| 39 | background:#00E63A |
| 40 | } |
| 41 | .secondary { |
| 42 | background:#1A1A2E; |
| 43 | color:#E0E0E0; |
| 44 | border:1px solid #2A2A3E |
| 45 | } |
| 46 | .secondary:hover { |
| 47 | background:#22223A; |
| 48 | border-color:#3A3A4E |
| 49 | } |
| 50 | .icon-btn { |
| 51 | display:inline-flex; |
| 52 | align-items:center; |
| 53 | justify-content:center; |
| 54 | width:38px; |
| 55 | height:38px; |
| 56 | border-radius:8px; |
| 57 | border:1px solid #2A2A3E; |
| 58 | background:transparent; |
| 59 | color:#A0A0A0; |
| 60 | cursor:pointer; |
| 61 | transition:all .2s |
| 62 | } |
| 63 | .icon-btn:hover { |
| 64 | background:rgba(255, |
| 65 | 255, |
| 66 | 255, |
| 67 | .05); |
| 68 | color:#E0E0E0; |
| 69 | border-color:#3A3A4E |
| 70 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-3 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <button class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] hover:-translate-y-0.5 transition-all"> |
| 3 | <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 5 | </svg> |
| 6 | Send |
| 7 | </button> |
| 8 | <button class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E] hover:bg-[#22223A] hover:border-[#3A3A4E] transition-all"> |
| 9 | <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 10 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| 11 | <polyline points="7 10 12 15 17 10"/> |
| 12 | <line x1="12" y1="15" x2="12" y2="3"/> |
| 13 | </svg> |
| 14 | Download |
| 15 | </button> |
| 16 | <button aria-label="Settings" class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-[#2A2A3E] bg-transparent text-[#A0A0A0] hover:bg-white/5 hover:text-[#E0E0E0] hover:border-[#3A3A4E] transition-all"> |
| 17 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="3"/> |
| 19 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 20 | </svg> |
| 21 | </button> |
| 22 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4"> |
| 2 | <button class="btn btn-success fw-semibold d-inline-flex align-items-center gap-2" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 5 | </svg> |
| 6 | Send |
| 7 | </button> |
| 8 | <button class="btn btn-dark fw-semibold border-secondary d-inline-flex align-items-center gap-2"> |
| 9 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 10 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| 11 | <polyline points="7 10 12 15 17 10"/> |
| 12 | <line x1="12" y1="15" x2="12" y2="3"/> |
| 13 | </svg> |
| 14 | Download |
| 15 | </button> |
| 16 | <button aria-label="Settings" class="btn btn-outline-dark border-secondary" style="width:38px;height:38px"> |
| 17 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="3"/> |
| 19 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 20 | </svg> |
| 21 | </button> |
| 22 | </div> |
Button Group
Segmented control style button groups for toggling between options.
group
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="btn-group"> |
| 3 | <button class="active"> |
| 4 | Day |
| 5 | </button> |
| 6 | <button> |
| 7 | Week |
| 8 | </button> |
| 9 | <button> |
| 10 | Month |
| 11 | </button> |
| 12 | </div> |
| 13 | <div class="btn-group outline"> |
| 14 | <button class="active"> |
| 15 | All |
| 16 | </button> |
| 17 | <button> |
| 18 | Active |
| 19 | </button> |
| 20 | <button> |
| 21 | Draft |
| 22 | </button> |
| 23 | </div> |
| 24 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:16px; |
| 5 | align-items:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .btn-group { |
| 9 | display:inline-flex; |
| 10 | border-radius:8px; |
| 11 | overflow:hidden; |
| 12 | border:1px solid #2A2A3E; |
| 13 | background:#0A0A0A |
| 14 | } |
| 15 | .btn-group button { |
| 16 | padding:8px 18px; |
| 17 | font-size:12px; |
| 18 | font-weight:500; |
| 19 | font-family:system-ui, |
| 20 | sans-serif; |
| 21 | cursor:pointer; |
| 22 | border:none; |
| 23 | background:transparent; |
| 24 | color:#808080; |
| 25 | transition:all .2s |
| 26 | } |
| 27 | .btn-group button:hover { |
| 28 | color:#E0E0E0; |
| 29 | background:rgba(255, |
| 30 | 255, |
| 31 | 255, |
| 32 | .03) |
| 33 | } |
| 34 | .btn-group button.active { |
| 35 | background:#00FF41; |
| 36 | color:#0A0A0A; |
| 37 | font-weight:600 |
| 38 | } |
| 39 | .btn-group button:not(:last-child) { |
| 40 | border-right:1px solid #2A2A3E |
| 41 | } |
| 42 | .outline { |
| 43 | border-color:#2A2A3E |
| 44 | } |
| 45 | .outline button.active { |
| 46 | background:transparent; |
| 47 | color:#00FF41; |
| 48 | box-shadow:inset 0 -2px 0 #00FF41 |
| 49 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.btn-group').forEach(g=>{g.querySelectorAll('button').forEach(b=>{b.addEventListener('click',()=>{g.querySelectorAll('button').forEach(x=>x.classList.remove('active'));b.classList.add('active')})})}) |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="inline-flex rounded-lg overflow-hidden border border-[#2A2A3E] bg-[#0A0A0A]" data-group> |
| 3 | <button class="px-5 py-2 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors bg-[#00FF41] text-[#0A0A0A] font-semibold"> |
| 4 | Day |
| 5 | </button> |
| 6 | <button class="px-5 py-2 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors border-l border-[#2A2A3E]"> |
| 7 | Week |
| 8 | </button> |
| 9 | <button class="px-5 py-2 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors border-l border-[#2A2A3E]"> |
| 10 | Month |
| 11 | </button> |
| 12 | </div> |
| 13 | <div class="inline-flex rounded-lg overflow-hidden border border-[#2A2A3E] bg-[#0A0A0A]" data-group> |
| 14 | <button class="px-5 py-2 text-xs font-medium text-[#00FF41] shadow-[inset_0_-2px_0_#00FF41] transition-colors"> |
| 15 | All |
| 16 | </button> |
| 17 | <button class="px-5 py-2 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors border-l border-[#2A2A3E]"> |
| 18 | Active |
| 19 | </button> |
| 20 | <button class="px-5 py-2 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors border-l border-[#2A2A3E]"> |
| 21 | Draft |
| 22 | </button> |
| 23 | </div> |
| 24 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 align-items-center justify-content-center p-4"> |
| 2 | <div class="btn-group" role="group" aria-label="View"> |
| 3 | <button class="btn btn-success active fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 4 | Day |
| 5 | </button> |
| 6 | <button class="btn btn-dark border-secondary"> |
| 7 | Week |
| 8 | </button> |
| 9 | <button class="btn btn-dark border-secondary"> |
| 10 | Month |
| 11 | </button> |
| 12 | </div> |
| 13 | <div class="btn-group" role="group" aria-label="Filter"> |
| 14 | <button class="btn btn-outline-success active fw-semibold" style="--bs-btn-color:#00FF41;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:rgba(0,255,65,0.08)"> |
| 15 | All |
| 16 | </button> |
| 17 | <button class="btn btn-outline-dark border-secondary"> |
| 18 | Active |
| 19 | </button> |
| 20 | <button class="btn btn-outline-dark border-secondary"> |
| 21 | Draft |
| 22 | </button> |
| 23 | </div> |
| 24 | </div> |
Loading & Disabled
Spinner indicators during async operations and disabled states to prevent double-submission.
loading
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn primary loading" disabled> |
| 3 | <span class="spinner"> |
| 4 | </span> |
| 5 | Saving... |
| 6 | </button> |
| 7 | <button class="btn secondary" disabled> |
| 8 | Disabled |
| 9 | </button> |
| 10 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:16px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:32px |
| 8 | } |
| 9 | @keyframes spin { |
| 10 | to { |
| 11 | transform:rotate(360deg) |
| 12 | } |
| 13 | } |
| 14 | .btn { |
| 15 | display:inline-flex; |
| 16 | align-items:center; |
| 17 | gap:8px; |
| 18 | padding:10px 20px; |
| 19 | border-radius:8px; |
| 20 | font-size:13px; |
| 21 | font-weight:600; |
| 22 | font-family:system-ui, |
| 23 | sans-serif; |
| 24 | border:none; |
| 25 | line-height:1; |
| 26 | cursor:pointer; |
| 27 | transition:all .2s |
| 28 | } |
| 29 | .btn:hover:not(:disabled) { |
| 30 | transform:translateY(-1px); |
| 31 | box-shadow:0 4px 12px rgba(0, |
| 32 | 0, |
| 33 | 0, |
| 34 | .3) |
| 35 | } |
| 36 | .btn:disabled { |
| 37 | opacity:.5; |
| 38 | cursor:not-allowed |
| 39 | } |
| 40 | .btn.loading { |
| 41 | pointer-events:none |
| 42 | } |
| 43 | .primary { |
| 44 | background:#00FF41; |
| 45 | color:#0A0A0A |
| 46 | } |
| 47 | .secondary { |
| 48 | background:#1A1A2E; |
| 49 | color:#E0E0E0; |
| 50 | border:1px solid #2A2A3E |
| 51 | } |
| 52 | .spinner { |
| 53 | width:16px; |
| 54 | height:16px; |
| 55 | border:2px solid rgba(0, |
| 56 | 0, |
| 57 | 0, |
| 58 | .2); |
| 59 | border-top-color:#0A0A0A; |
| 60 | border-radius:50%; |
| 61 | animation:spin .6s linear infinite; |
| 62 | display:inline-block |
| 63 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-4 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <button disabled class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] opacity-50 cursor-not-allowed"> |
| 3 | <span class="w-4 h-4 border-2 border-black/20 border-t-[#0A0A0A] rounded-full animate-spin"> |
| 4 | </span> |
| 5 | Saving... |
| 6 | </button> |
| 7 | <button disabled class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E] opacity-50 cursor-not-allowed"> |
| 8 | Disabled |
| 9 | </button> |
| 10 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4"> |
| 2 | <button class="btn btn-success fw-semibold d-inline-flex align-items-center gap-2 disabled" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41"> |
| 3 | <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"> |
| 4 | </span> |
| 5 | Saving... |
| 6 | </button> |
| 7 | <button class="btn btn-dark fw-semibold border-secondary" disabled> |
| 8 | Disabled |
| 9 | </button> |
| 10 | </div> |
Accessibility
Buttons must be keyboard focusable, have sufficient contrast, and communicate state clearly. Use aria-pressed for toggle buttons and aria-expanded for buttons that control expandable regions.
- Use real <button> elements, not clickable divs.
- Ensure focus styles are visible (outline or ring).
- Icon-only buttons require an aria-label.
- Disabled buttons should use disabled or aria-disabled.
- Loading buttons should keep accessible text or use aria-busy.
Animations & Micro-interactions
Modern buttons feel alive with subtle motion: lift on hover, press on active, rhythmic glow for primary CTAs, and a ripple to confirm clicks. Keep durations short (150–250 ms) and easing crisp so the UI feels responsive without becoming distracting.
📝
note
Respect prefers-reduced-motion. Wrap transforms and animations in @media (prefers-reduced-motion: no-preference) or set transition-duration: 0.01ms so motion-sensitive users get an instantly static interface.
animations
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn lift"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 4 | <path d="M12 19V5M5 12l7-7 7 7"/> |
| 5 | </svg> |
| 6 | Lift |
| 7 | </button> |
| 8 | <button class="btn press"> |
| 9 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 10 | <path d="M12 5v14M5 12l7 7 7-7"/> |
| 11 | </svg> |
| 12 | Press |
| 13 | </button> |
| 14 | <button class="btn glow"> |
| 15 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 16 | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| 17 | </svg> |
| 18 | Glow |
| 19 | </button> |
| 20 | <button class="btn ripple"> |
| 21 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 22 | <circle cx="12" cy="12" r="3"/> |
| 23 | <circle cx="12" cy="12" r="8"/> |
| 24 | <circle cx="12" cy="12" r="13"/> |
| 25 | </svg> |
| 26 | Ripple |
| 27 | </button> |
| 28 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:16px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:32px; |
| 8 | background:#0A0A0A |
| 9 | } |
| 10 | .btn { |
| 11 | position:relative; |
| 12 | display:inline-flex; |
| 13 | align-items:center; |
| 14 | gap:8px; |
| 15 | padding:10px 20px; |
| 16 | border-radius:8px; |
| 17 | font-size:13px; |
| 18 | font-weight:600; |
| 19 | font-family:system-ui, |
| 20 | sans-serif; |
| 21 | cursor:pointer; |
| 22 | border:none; |
| 23 | overflow:hidden; |
| 24 | color:#E0E0E0; |
| 25 | background:#111; |
| 26 | border:1px solid #2A2A3E; |
| 27 | transition:all .2s ease |
| 28 | } |
| 29 | .btn svg { |
| 30 | flex-shrink:0 |
| 31 | } |
| 32 | .lift:hover { |
| 33 | transform:translateY(-3px); |
| 34 | box-shadow:0 8px 20px rgba(0, |
| 35 | 255, |
| 36 | 65, |
| 37 | .2); |
| 38 | border-color:#00FF41 |
| 39 | } |
| 40 | .press { |
| 41 | background:#00FF41; |
| 42 | color:#0A0A0A |
| 43 | } |
| 44 | .press:hover { |
| 45 | background:#00E63A |
| 46 | } |
| 47 | .press:active { |
| 48 | transform:scale(0.96) |
| 49 | } |
| 50 | .glow { |
| 51 | background:#00FF41; |
| 52 | color:#0A0A0A |
| 53 | } |
| 54 | .glow:hover { |
| 55 | animation:glowPulse 1.5s ease-in-out infinite |
| 56 | } |
| 57 | @keyframes glowPulse { |
| 58 | 0%, |
| 59 | 100% { |
| 60 | box-shadow:0 0 8px rgba(0, |
| 61 | 255, |
| 62 | 65, |
| 63 | .4) |
| 64 | } |
| 65 | 50% { |
| 66 | box-shadow:0 0 24px rgba(0, |
| 67 | 255, |
| 68 | 65, |
| 69 | .8) |
| 70 | } |
| 71 | } |
| 72 | .ripple { |
| 73 | background:#1A1A2E; |
| 74 | color:#E0E0E0; |
| 75 | border-color:#2A2A3E |
| 76 | } |
| 77 | .ripple:hover { |
| 78 | background:#22223A |
| 79 | } |
| 80 | .ripple .ripple-effect { |
| 81 | position:absolute; |
| 82 | border-radius:50%; |
| 83 | transform:scale(0); |
| 84 | animation:ripple .6s linear; |
| 85 | background:rgba(0, |
| 86 | 255, |
| 87 | 65, |
| 88 | .4); |
| 89 | pointer-events:none |
| 90 | } |
| 91 | @keyframes ripple { |
| 92 | to { |
| 93 | transform:scale(4); |
| 94 | opacity:0 |
| 95 | } |
| 96 | } |
| 97 | @media (prefers-reduced-motion:reduce) { |
| 98 | .btn { |
| 99 | transition:none !important; |
| 100 | animation:none !important |
| 101 | } |
| 102 | .ripple .ripple-effect { |
| 103 | animation:none; |
| 104 | opacity:0 |
| 105 | } |
| 106 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.ripple').forEach(btn=>{btn.addEventListener('click',function(e){const rect=this.getBoundingClientRect();const circle=document.createElement('span');const diameter=Math.max(rect.width,rect.height);const radius=diameter/2;circle.style.width=circle.style.height=diameter+'px';circle.style.left=(e.clientX-rect.left-radius)+'px';circle.style.top=(e.clientY-rect.top-radius)+'px';circle.classList.add('ripple-effect');const existing=this.getElementsByClassName('ripple-effect')[0];if(existing)existing.remove();this.appendChild(circle);});}); |
untitled.html
HTML
| 1 | <style> |
| 2 | @keyframes twGlow { 0%,100%{box-shadow:0 0 8px rgba(0,255,65,.4)} 50%{box-shadow:0 0 24px rgba(0,255,65,.8)} } |
| 3 | @keyframes twRipple { to { transform:scale(4); opacity:0; } } |
| 4 | .ripple-ring { position:absolute; border-radius:50%; transform:scale(0); animation:twRipple .6s linear; background:rgba(0,255,65,.4); pointer-events:none; } |
| 5 | .glow-anim:hover { animation:twGlow 1.5s ease-in-out infinite; } |
| 6 | @media (prefers-reduced-motion:reduce) { .motion-btn { transition:none !important; animation:none !important; } .ripple-ring { animation:none; opacity:0; } } |
| 7 | </style> |
| 8 | <div class="flex flex-wrap gap-4 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 9 | <button class="motion-btn relative inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#111] text-[#E0E0E0] border border-[#2A2A3E] hover:-translate-y-[3px] hover:shadow-[0_8px_20px_rgba(0,255,65,0.2)] hover:border-[#00FF41] transition-all"> |
| 10 | <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 11 | <path d="M12 19V5M5 12l7-7 7 7"/> |
| 12 | </svg> |
| 13 | Lift |
| 14 | </button> |
| 15 | <button class="motion-btn relative inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] active:scale-[0.96] transition-all"> |
| 16 | <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 17 | <path d="M12 5v14M5 12l7 7 7-7"/> |
| 18 | </svg> |
| 19 | Press |
| 20 | </button> |
| 21 | <button class="motion-btn glow-anim relative inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 22 | <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 23 | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| 24 | </svg> |
| 25 | Glow |
| 26 | </button> |
| 27 | <button class="motion-btn ripple-trigger relative inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E] hover:bg-[#22223A] active:scale-[0.98] transition-all overflow-hidden"> |
| 28 | <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 29 | <circle cx="12" cy="12" r="3"/> |
| 30 | <circle cx="12" cy="12" r="8"/> |
| 31 | <circle cx="12" cy="12" r="13"/> |
| 32 | </svg> |
| 33 | Ripple |
| 34 | </button> |
| 35 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | @keyframes bsGlow { 0%,100%{box-shadow:0 0 8px rgba(0,255,65,.4)} 50%{box-shadow:0 0 24px rgba(0,255,65,.8)} } |
| 3 | @keyframes bsRipple { to { transform:scale(4); opacity:0; } } |
| 4 | .bs-ripple { position:absolute; border-radius:50%; transform:scale(0); animation:bsRipple .6s linear; background:rgba(0,255,65,.4); pointer-events:none; } |
| 5 | .bs-glow:hover { animation:bsGlow 1.5s ease-in-out infinite; } |
| 6 | .bs-btn { position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; border:none; overflow:hidden; transition:all .2s ease; } |
| 7 | .bs-lift { background:#111; color:#E0E0E0; border:1px solid #2A2A3E; } |
| 8 | .bs-lift:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,255,65,.2); border-color:#00FF41; } |
| 9 | .bs-press { background:#00FF41; color:#0A0A0A; } |
| 10 | .bs-press:hover { background:#00E63A; } |
| 11 | .bs-press:active { transform:scale(0.96); } |
| 12 | .bs-ripple-btn { background:#1A1A2E; color:#E0E0E0; border:1px solid #2A2A3E; } |
| 13 | .bs-ripple-btn:hover { background:#22223A; } |
| 14 | @media (prefers-reduced-motion:reduce) { .bs-btn { transition:none !important; animation:none !important; } .bs-ripple { animation:none; opacity:0; } } |
| 15 | </style> |
| 16 | <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4"> |
| 17 | <button class="bs-btn bs-lift"> |
| 18 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M12 19V5M5 12l7-7 7 7"/> |
| 20 | </svg> |
| 21 | Lift |
| 22 | </button> |
| 23 | <button class="bs-btn bs-press"> |
| 24 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 25 | <path d="M12 5v14M5 12l7 7 7-7"/> |
| 26 | </svg> |
| 27 | Press |
| 28 | </button> |
| 29 | <button class="bs-btn bs-press bs-glow"> |
| 30 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 31 | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| 32 | </svg> |
| 33 | Glow |
| 34 | </button> |
| 35 | <button class="bs-btn bs-ripple-btn" data-bs-ripple> |
| 36 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 37 | <circle cx="12" cy="12" r="3"/> |
| 38 | <circle cx="12" cy="12" r="8"/> |
| 39 | <circle cx="12" cy="12" r="13"/> |
| 40 | </svg> |
| 41 | Ripple |
| 42 | </button> |
| 43 | </div> |
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.
Brand-colored social login and action buttons.