taste-skill / Components / Attio Buttons
Attio Button Styles
7 distinct Attio button styles extracted from attio.com — heights, padding, 10px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://attio.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Attio is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Attio.Rendered on the Attio canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Talk to sales | 36px | 0px 12px | 10px | #FFFFFF#2E3238 | 1px solid #CAD0D9 | 14px / 500 |
| Talk to sales | 36px | 0px 12px | 10px | #101010#EDEFF3 | 1px solid #2E3238 | 14px / 500 |
| Subscribe | 40px | 0px 12px | 10px | #202124#F3F4F6 | 1px solid #505967 | 14px / 500 |
| Continue | 36px | 0px 12px | 10px | #202124#F3F4F6 | 1px solid #505967 | 14px / 500 |
| See more | 32px | 0px 6px | 10px | #101010#EDEFF3 | 1px solid #2E3238 | 12px / 500 |
| Read more | 32px | 0px 6px | 10px | #FFFFFF#2E3238 | 1px solid #CAD0D9 | 12px / 500 |
| Start for free | 36px | 0px 12px | 10px | #2E3238#EDEFF3 | 1px solid rgba(80, 90, 104, 0.5) | 14px / 500 |
Copy-paste code
Button 1 — Talk to sales
<!-- Attio button 1: "Talk to sales" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[12px] rounded-[10px] bg-[#FFFFFF] text-[#2E3238] border-[1px] border-solid border-[#CAD0D9] text-[14px] font-[500]">Talk to sales</a>
/* plain CSS */
.btn-attio-1 { height:36px; padding:0px 12px; border-radius:10px; background:#FFFFFF; color:#2E3238; border:1px solid #CAD0D9; font-size:14px; font-weight:500; }Button 2 — Talk to sales
<!-- Attio button 2: "Talk to sales" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[12px] rounded-[10px] bg-[#101010] text-[#EDEFF3] border-[1px] border-solid border-[#2E3238] text-[14px] font-[500]">Talk to sales</a>
/* plain CSS */
.btn-attio-2 { height:36px; padding:0px 12px; border-radius:10px; background:#101010; color:#EDEFF3; border:1px solid #2E3238; font-size:14px; font-weight:500; }Button 3 — Subscribe
<!-- Attio button 3: "Subscribe" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[12px] rounded-[10px] bg-[#202124] text-[#F3F4F6] border-[1px] border-solid border-[#505967] text-[14px] font-[500]">Subscribe</a>
/* plain CSS */
.btn-attio-3 { height:40px; padding:0px 12px; border-radius:10px; background:#202124; color:#F3F4F6; border:1px solid #505967; font-size:14px; font-weight:500; }Button 4 — Continue
<!-- Attio button 4: "Continue" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[12px] rounded-[10px] bg-[#202124] text-[#F3F4F6] border-[1px] border-solid border-[#505967] text-[14px] font-[500]">Continue</a>
/* plain CSS */
.btn-attio-4 { height:36px; padding:0px 12px; border-radius:10px; background:#202124; color:#F3F4F6; border:1px solid #505967; font-size:14px; font-weight:500; }Button 5 — See more
<!-- Attio button 5: "See more" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[6px] rounded-[10px] bg-[#101010] text-[#EDEFF3] border-[1px] border-solid border-[#2E3238] text-[12px] font-[500]">See more</a>
/* plain CSS */
.btn-attio-5 { height:32px; padding:0px 6px; border-radius:10px; background:#101010; color:#EDEFF3; border:1px solid #2E3238; font-size:12px; font-weight:500; }Button 6 — Read more
<!-- Attio button 6: "Read more" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[6px] rounded-[10px] bg-[#FFFFFF] text-[#2E3238] border-[1px] border-solid border-[#CAD0D9] text-[12px] font-[500]">Read more</a>
/* plain CSS */
.btn-attio-6 { height:32px; padding:0px 6px; border-radius:10px; background:#FFFFFF; color:#2E3238; border:1px solid #CAD0D9; font-size:12px; font-weight:500; }Button 7 — Start for free
<!-- Attio button 7: "Start for free" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[12px] rounded-[10px] bg-[#2E3238] text-[#EDEFF3] border-[1px] border-solid border-[rgba(80,90,104,0.5)] text-[14px] font-[500]">Start for free</a>
/* plain CSS */
.btn-attio-7 { height:36px; padding:0px 12px; border-radius:10px; background:#2E3238; color:#EDEFF3; border:1px solid rgba(80, 90, 104, 0.5); font-size:14px; font-weight:500; }Transition seen on these buttons: cubic-bezier(0.2, 0, 0, 1)
More Attio
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 →