taste-skill / Components / Loops Buttons
Loops Button Styles
10 distinct Loops button styles extracted from loops.so — heights, padding, 40px/999px/8px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://loops.so on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Loops is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Loops.Rendered on the Loops canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Start for free | 44px | 10px 20px | 40px | #21201C#0000EE | none | 12px / 400 |
| Start for free | 52px | 14px 18px | 999px | #FFF4EC#FDFDFC | none | 12px / 400 |
| Start for free | 40px | 8px 14px | 999px | transparent#FDFDFC | none | 12px / 400 |
| Segments and filters | 33px | 7px 13px | 999px | #F9F9F8#63635E | 1px solid #E9E8E6 | 14px / 400 |
| Acquisition | 36px | 0px 12px | 8px | #FDFDFC#21201C | 1px solid #E9E8E6 | 15.5px / 600 |
| Button | 56px | 9px 12px | 10px | #FDFDFC#21201C | 1px solid #E9E8E6 | 12px / 400 |
| Exit Workflow | 42px | 9px 12px | 10px | #FDFDFC#21201C | 1px solid #E9E8E6 | 12px / 400 |
| Book a demo | 44px | 8px 14px | 999px | #FDFDFC#21201C | 1px solid #DAD9D6 | 12px / 400 |
| For agents | 52px | 14px 18px | 999px | transparent#21201C | 1px solid rgba(255, 245, 235, 0.4) | 12px / 400 |
| Log in | 40px | 8px 14px | 999px | #FDFDFC#21201C | 1px solid #DAD9D6 | 12px / 400 |
Copy-paste code
Button 1 — Start for free
<!-- Loops button 1: "Start for free" -->
<a class="inline-flex items-center justify-center h-[44px] py-[10px] px-[20px] rounded-[40px] bg-[#21201C] text-[#0000EE] text-[12px] font-[400] shadow-[rgba(255,255,255,0.05)_0px_1px_2px_0px_inset,rgba(28,25,23,0.14)_0px_2px_5px_0px,rgba(28,25,23,0.3)_0px_8px_18px_-12px]">Start for free</a>
/* plain CSS */
.btn-loops-1 { height:44px; padding:10px 20px; border-radius:40px; background:#21201C; color:#0000EE; border:0; font-size:12px; font-weight:400; box-shadow:rgba(255, 255, 255, 0.05) 0px 1px 2px 0px inset, rgba(28, 25, 23, 0.14) 0px 2px 5px 0px, rgba(28, 25, 23, 0.3) 0px 8px 18px -12px; }Button 2 — Start for free
<!-- Loops button 2: "Start for free" -->
<a class="inline-flex items-center justify-center h-[52px] py-[14px] px-[18px] rounded-[999px] bg-[#FFF4EC] text-[#FDFDFC] text-[12px] font-[400]">Start for free</a>
/* plain CSS */
.btn-loops-2 { height:52px; padding:14px 18px; border-radius:999px; background:#FFF4EC; color:#FDFDFC; border:0; font-size:12px; font-weight:400; }Button 3 — Start for free
<!-- Loops button 3: "Start for free" -->
<a class="inline-flex items-center justify-center h-[40px] py-[8px] px-[14px] rounded-[999px] text-[#FDFDFC] text-[12px] font-[400] shadow-[color(srgb_0.992157_0.992157_0.988235_/_0.04)_0px_1px_2px_0px_inset,color(srgb_0.129412_0.12549_0.109804_/_0.12)_0px_2px_5px_0px]">Start for free</a>
/* plain CSS */
.btn-loops-3 { height:40px; padding:8px 14px; border-radius:999px; background:transparent; color:#FDFDFC; border:0; font-size:12px; font-weight:400; box-shadow:color(srgb 0.992157 0.992157 0.988235 / 0.04) 0px 1px 2px 0px inset, color(srgb 0.129412 0.12549 0.109804 / 0.12) 0px 2px 5px 0px; }Button 4 — Segments and filters
<!-- Loops button 4: "Segments and filters" -->
<a class="inline-flex items-center justify-center h-[33px] py-[7px] px-[13px] rounded-[999px] bg-[#F9F9F8] text-[#63635E] border-[1px] border-solid border-[#E9E8E6] text-[14px] font-[400]">Segments and filters</a>
/* plain CSS */
.btn-loops-4 { height:33px; padding:7px 13px; border-radius:999px; background:#F9F9F8; color:#63635E; border:1px solid #E9E8E6; font-size:14px; font-weight:400; }Button 5 — Acquisition
<!-- Loops button 5: "Acquisition" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[12px] rounded-[8px] bg-[#FDFDFC] text-[#21201C] border-[1px] border-solid border-[#E9E8E6] text-[15.5px] font-[600]">Acquisition</a>
/* plain CSS */
.btn-loops-5 { height:36px; padding:0px 12px; border-radius:8px; background:#FDFDFC; color:#21201C; border:1px solid #E9E8E6; font-size:15.5px; font-weight:600; }Button 6 — Button
<!-- Loops button 6: "Button" -->
<a class="inline-flex items-center justify-center h-[56px] py-[9px] px-[12px] rounded-[10px] bg-[#FDFDFC] text-[#21201C] border-[1px] border-solid border-[#E9E8E6] text-[12px] font-[400] shadow-[rgba(28,25,23,0.055)_0px_2px_6px_0px]">Button</a>
/* plain CSS */
.btn-loops-6 { height:56px; padding:9px 12px; border-radius:10px; background:#FDFDFC; color:#21201C; border:1px solid #E9E8E6; font-size:12px; font-weight:400; box-shadow:rgba(28, 25, 23, 0.055) 0px 2px 6px 0px; }Button 7 — Exit Workflow
<!-- Loops button 7: "Exit Workflow" -->
<a class="inline-flex items-center justify-center h-[42px] py-[9px] px-[12px] rounded-[10px] bg-[#FDFDFC] text-[#21201C] border-[1px] border-solid border-[#E9E8E6] text-[12px] font-[400] shadow-[rgba(28,25,23,0.055)_0px_2px_6px_0px]">Exit Workflow</a>
/* plain CSS */
.btn-loops-7 { height:42px; padding:9px 12px; border-radius:10px; background:#FDFDFC; color:#21201C; border:1px solid #E9E8E6; font-size:12px; font-weight:400; box-shadow:rgba(28, 25, 23, 0.055) 0px 2px 6px 0px; }Button 8 — Book a demo
<!-- Loops button 8: "Book a demo" -->
<a class="inline-flex items-center justify-center h-[44px] py-[8px] px-[14px] rounded-[999px] bg-[#FDFDFC] text-[#21201C] border-[1px] border-solid border-[#DAD9D6] text-[12px] font-[400]">Book a demo</a>
/* plain CSS */
.btn-loops-8 { height:44px; padding:8px 14px; border-radius:999px; background:#FDFDFC; color:#21201C; border:1px solid #DAD9D6; font-size:12px; font-weight:400; }Button 9 — For agents
<!-- Loops button 9: "For agents" -->
<a class="inline-flex items-center justify-center h-[52px] py-[14px] px-[18px] rounded-[999px] text-[#21201C] border-[1px] border-solid border-[rgba(255,245,235,0.4)] text-[12px] font-[400]">For agents</a>
/* plain CSS */
.btn-loops-9 { height:52px; padding:14px 18px; border-radius:999px; background:transparent; color:#21201C; border:1px solid rgba(255, 245, 235, 0.4); font-size:12px; font-weight:400; }Button 10 — Log in
<!-- Loops button 10: "Log in" -->
<a class="inline-flex items-center justify-center h-[40px] py-[8px] px-[14px] rounded-[999px] bg-[#FDFDFC] text-[#21201C] border-[1px] border-solid border-[#DAD9D6] text-[12px] font-[400]">Log in</a>
/* plain CSS */
.btn-loops-10 { height:40px; padding:8px 14px; border-radius:999px; background:#FDFDFC; color:#21201C; border:1px solid #DAD9D6; font-size:12px; font-weight:400; }Transition seen on these buttons: ease
More Loops
Loops full token specLoops style guideLoops CardsLoops Pricing TableResend vs LoopsLinear vs LoopsMintlify vs LoopsCal.com vs LoopsDub vs Loops
Same component, other brands
Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.
See taste-skill Pro →