taste-skill / Components / Ashby Buttons
Ashby Button Styles
3 distinct Ashby button styles extracted from ashbyhq.com — heights, padding, 6px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://www.ashbyhq.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Ashby is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Ashby.Rendered on the Ashby canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Get in Touch | 36px | 1px 16px | 6px | transparent#FCFCFE | none | 16px / 545 |
| Get in Touch | 44px | 1px 24px | 6px | transparent#FCFCFE | none | 20px / 500 |
| Ashby Platform | 41px | 8px 12px | 6px | #EEEDEF#717075 | none | 16px / 400 |
Copy-paste code
Button 1 — Get in Touch
<!-- Ashby button 1: "Get in Touch" -->
<a class="inline-flex items-center justify-center h-[36px] py-[1px] px-[16px] rounded-[6px] text-[#FCFCFE] text-[16px] font-[545] shadow-[rgba(20,20,21,0.16)_0px_0px_0px_1px_inset,rgba(255,255,255,0.2)_0px_1px_2px_0px_inset]">Get in Touch</a>
/* plain CSS */
.btn-ashby-1 { height:36px; padding:1px 16px; border-radius:6px; background:transparent; color:#FCFCFE; border:0; font-size:16px; font-weight:545; box-shadow:rgba(20, 20, 21, 0.16) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 2px 0px inset; }Button 2 — Get in Touch
<!-- Ashby button 2: "Get in Touch" -->
<a class="inline-flex items-center justify-center h-[44px] py-[1px] px-[24px] rounded-[6px] text-[#FCFCFE] text-[20px] font-[500] shadow-[rgba(20,20,21,0.16)_0px_0px_0px_1px_inset,rgba(255,255,255,0.2)_0px_1px_2px_0px_inset]">Get in Touch</a>
/* plain CSS */
.btn-ashby-2 { height:44px; padding:1px 24px; border-radius:6px; background:transparent; color:#FCFCFE; border:0; font-size:20px; font-weight:500; box-shadow:rgba(20, 20, 21, 0.16) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 2px 0px inset; }Button 3 — Ashby Platform
<!-- Ashby button 3: "Ashby Platform" -->
<a class="inline-flex items-center justify-center h-[41px] py-[8px] px-[12px] rounded-[6px] bg-[#EEEDEF] text-[#717075] text-[16px] font-[400]">Ashby Platform</a>
/* plain CSS */
.btn-ashby-3 { height:41px; padding:8px 12px; border-radius:6px; background:#EEEDEF; color:#717075; border:0; font-size:16px; font-weight:400; }Transition seen on these buttons: cubic-bezier(0.16, 1, 0.3, 1)
More Ashby
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 →