|$ curl https://forge-ai.dev/api/markdown?path=docs/components/buttons
$cat docs/buttons.md
updated Recently·12 min read·published
Buttons
◆CSS◆HTML◆UI◆Intermediate
10+ button styles covering variants, sizes, shapes, icons, groups, loading, and animations.
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 | } |
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 | } |
Pill & Shape
Rounded pill buttons and square icon buttons for visual variety.
shapes
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn primary pill"> |
| 3 | Rounded |
| 4 | </button> |
| 5 | <button class="btn secondary pill"> |
| 6 | Pill |
| 7 | </button> |
| 8 | <button class="btn outline pill"> |
| 9 | Button |
| 10 | </button> |
| 11 | <button class="btn primary square"> |
| 12 | S |
| 13 | </button> |
| 14 | <button class="btn secondary square"> |
| 15 | M |
| 16 | </button> |
| 17 | <button class="btn danger square"> |
| 18 | X |
| 19 | </button> |
| 20 | </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 | font-size:13px; |
| 15 | font-weight:600; |
| 16 | font-family:system-ui, |
| 17 | sans-serif; |
| 18 | cursor:pointer; |
| 19 | border:none; |
| 20 | transition:all .2s ease; |
| 21 | line-height:1 |
| 22 | } |
| 23 | .btn:hover { |
| 24 | transform:translateY(-1px); |
| 25 | box-shadow:0 4px 12px rgba(0, |
| 26 | 0, |
| 27 | 0, |
| 28 | .3) |
| 29 | } |
| 30 | .pill { |
| 31 | border-radius:999px |
| 32 | } |
| 33 | .square { |
| 34 | border-radius:6px; |
| 35 | width:38px; |
| 36 | height:38px; |
| 37 | padding:0; |
| 38 | justify-content:center |
| 39 | } |
| 40 | .primary { |
| 41 | background:#00FF41; |
| 42 | color:#0A0A0A |
| 43 | } |
| 44 | .primary:hover { |
| 45 | background:#00E63A |
| 46 | } |
| 47 | .secondary { |
| 48 | background:#1A1A2E; |
| 49 | color:#E0E0E0; |
| 50 | border:1px solid #2A2A3E |
| 51 | } |
| 52 | .secondary:hover { |
| 53 | background:#22223A |
| 54 | } |
| 55 | .outline { |
| 56 | background:transparent; |
| 57 | color:#00FF41; |
| 58 | border:1.5px solid #00FF41 |
| 59 | } |
| 60 | .outline:hover { |
| 61 | background:rgba(0, |
| 62 | 255, |
| 63 | 65, |
| 64 | .08) |
| 65 | } |
| 66 | .danger { |
| 67 | background:#EF4444; |
| 68 | color:#fff |
| 69 | } |
| 70 | .danger:hover { |
| 71 | background:#DC2626 |
| 72 | } |
Block Width
Full-width buttons for forms, CTAs, and action bars.
block
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <button class="btn primary block"> |
| 3 | Full Width Primary |
| 4 | </button> |
| 5 | <button class="btn secondary block"> |
| 6 | Full Width Secondary |
| 7 | </button> |
| 8 | <button class="btn outline block"> |
| 9 | Full Width Outline |
| 10 | </button> |
| 11 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | max-width:380px; |
| 3 | margin:20px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:10px; |
| 7 | padding:0 16px |
| 8 | } |
| 9 | .btn { |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | justify-content:center; |
| 13 | gap:6px; |
| 14 | padding:12px 20px; |
| 15 | border-radius:8px; |
| 16 | font-size:13px; |
| 17 | font-weight:600; |
| 18 | font-family:system-ui, |
| 19 | sans-serif; |
| 20 | cursor:pointer; |
| 21 | border:none; |
| 22 | transition:all .2s ease; |
| 23 | line-height:1 |
| 24 | } |
| 25 | .btn:hover { |
| 26 | transform:translateY(-1px); |
| 27 | box-shadow:0 4px 12px rgba(0, |
| 28 | 0, |
| 29 | 0, |
| 30 | .3) |
| 31 | } |
| 32 | .block { |
| 33 | width:100% |
| 34 | } |
| 35 | .primary { |
| 36 | background:#00FF41; |
| 37 | color:#0A0A0A |
| 38 | } |
| 39 | .primary:hover { |
| 40 | background:#00E63A |
| 41 | } |
| 42 | .secondary { |
| 43 | background:#1A1A2E; |
| 44 | color:#E0E0E0; |
| 45 | border:1px solid #2A2A3E |
| 46 | } |
| 47 | .secondary:hover { |
| 48 | background:#22223A; |
| 49 | border-color:#3A3A4E |
| 50 | } |
| 51 | .outline { |
| 52 | background:transparent; |
| 53 | color:#00FF41; |
| 54 | border:1.5px solid #00FF41 |
| 55 | } |
| 56 | .outline:hover { |
| 57 | background:rgba(0, |
| 58 | 255, |
| 59 | 65, |
| 60 | .08) |
| 61 | } |
With Icons
Icon + label buttons and compact icon-only buttons.
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="btn secondary"> |
| 17 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"> |
| 18 | <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/> |
| 19 | <circle cx="12" cy="12" r="3"/> |
| 20 | </svg> |
| 21 | 12 |
| 22 | </button> |
| 23 | <button class="icon-btn" aria-label="Settings"> |
| 24 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 25 | <circle cx="12" cy="12" r="3"/> |
| 26 | <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"/> |
| 27 | </svg> |
| 28 | </button> |
| 29 | </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 | } |
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 | <button> |
| 13 | Year |
| 14 | </button> |
| 15 | </div> |
| 16 | <div class="btn-group outline"> |
| 17 | <button class="active"> |
| 18 | All |
| 19 | </button> |
| 20 | <button> |
| 21 | Active |
| 22 | </button> |
| 23 | <button> |
| 24 | Draft |
| 25 | </button> |
| 26 | <button> |
| 27 | Archived |
| 28 | </button> |
| 29 | </div> |
| 30 | </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')})})}) |
Loading State
Spinner indicators during async operations, with disabled state to prevent double-submission.
loading
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn primary" id="load-btn"> |
| 3 | <span class="spinner" style="display:none"> |
| 4 | </span> |
| 5 | <span class="label"> |
| 6 | Save Changes |
| 7 | </span> |
| 8 | </button> |
| 9 | <button class="btn secondary"> |
| 10 | <span> |
| 11 | Click me |
| 12 | </span> |
| 13 | </button> |
| 14 | <button class="btn ghost"> |
| 15 | <span> |
| 16 | Click me |
| 17 | </span> |
| 18 | </button> |
| 19 | </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 { |
| 30 | transform:translateY(-1px); |
| 31 | box-shadow:0 4px 12px rgba(0, |
| 32 | 0, |
| 33 | 0, |
| 34 | .3) |
| 35 | } |
| 36 | .btn.loading { |
| 37 | pointer-events:none; |
| 38 | opacity:.7; |
| 39 | transform:none!important; |
| 40 | box-shadow:none!important |
| 41 | } |
| 42 | .primary { |
| 43 | background:#00FF41; |
| 44 | color:#0A0A0A |
| 45 | } |
| 46 | .primary:hover { |
| 47 | background:#00E63A |
| 48 | } |
| 49 | .secondary { |
| 50 | background:#1A1A2E; |
| 51 | color:#E0E0E0; |
| 52 | border:1px solid #2A2A3E |
| 53 | } |
| 54 | .secondary:hover { |
| 55 | background:#22223A; |
| 56 | border-color:#3A3A4E |
| 57 | } |
| 58 | .ghost { |
| 59 | background:transparent; |
| 60 | color:#A0A0A0; |
| 61 | border:1.5px solid transparent |
| 62 | } |
| 63 | .ghost:hover { |
| 64 | background:rgba(255, |
| 65 | 255, |
| 66 | 255, |
| 67 | .05); |
| 68 | color:#E0E0E0 |
| 69 | } |
| 70 | .spinner { |
| 71 | width:16px; |
| 72 | height:16px; |
| 73 | border:2px solid rgba(0, |
| 74 | 0, |
| 75 | 0, |
| 76 | .2); |
| 77 | border-top-color:#0A0A0A; |
| 78 | border-radius:50%; |
| 79 | animation:spin .6s linear infinite; |
| 80 | display:inline-block |
| 81 | } |
| 82 | } |
untitled.js
JavaScript
| 1 | document.getElementById('load-btn').addEventListener('click',function(){const spinner=this.querySelector('.spinner');const label=this.querySelector('.label');spinner.style.display='inline-block';label.textContent='Saving...';this.classList.add('loading');setTimeout(()=>{spinner.style.display='none';label.textContent='Saved!';this.style.background='#22C55E';setTimeout(()=>{label.textContent='Save Changes';this.style.background='';this.classList.remove('loading')},1500)},2000)}) |
Animated
Buttons with hover animations — pulse glow, border slide, and scale bounce.
animated
Live
untitled.html
HTML
| 1 | <div class="group"> |
| 2 | <button class="btn pulse"> |
| 3 | Pulse Glow |
| 4 | </button> |
| 5 | <button class="btn slide"> |
| 6 | Slide Border |
| 7 | </button> |
| 8 | <button class="btn bounce"> |
| 9 | Bounce |
| 10 | </button> |
| 11 | </div> |
untitled.css
CSS
| 1 | .group { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:20px; |
| 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:12px 24px; |
| 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:1.5px solid #00FF41; |
| 21 | background:transparent; |
| 22 | color:#00FF41; |
| 23 | transition:all .3s ease; |
| 24 | position:relative; |
| 25 | overflow:hidden |
| 26 | } |
| 27 | .pulse:hover { |
| 28 | animation:pulse 1s infinite; |
| 29 | box-shadow:0 0 20px rgba(0, |
| 30 | 255, |
| 31 | 65, |
| 32 | .3) |
| 33 | } |
| 34 | @keyframes pulse { |
| 35 | 0% { |
| 36 | box-shadow:0 0 0 0 rgba(0, |
| 37 | 255, |
| 38 | 65, |
| 39 | .4) |
| 40 | } |
| 41 | 70% { |
| 42 | box-shadow:0 0 0 12px rgba(0, |
| 43 | 255, |
| 44 | 65, |
| 45 | 0) |
| 46 | } |
| 47 | 100% { |
| 48 | box-shadow:0 0 0 0 rgba(0, |
| 49 | 255, |
| 50 | 65, |
| 51 | 0) |
| 52 | } |
| 53 | } |
| 54 | .slide::after { |
| 55 | content:''; |
| 56 | position:absolute; |
| 57 | left:0; |
| 58 | bottom:0; |
| 59 | width:0; |
| 60 | height:2px; |
| 61 | background:#00FF41; |
| 62 | transition:width .3s ease |
| 63 | } |
| 64 | .slide:hover::after { |
| 65 | width:100% |
| 66 | } |
| 67 | .bounce:hover { |
| 68 | animation:bounce .4s ease |
| 69 | } |
| 70 | @keyframes bounce { |
| 71 | 0%, |
| 72 | 100% { |
| 73 | transform:translateY(0) |
| 74 | } |
| 75 | 40% { |
| 76 | transform:translateY(-6px) |
| 77 | } |
| 78 | 60% { |
| 79 | transform:translateY(-3px) |
| 80 | } |
| 81 | } |
Brand-colored social login buttons and action buttons (like, bookmark, share).