taste-skill / Components / PostHog Buttons
PostHog Button Styles
8 distinct PostHog button styles extracted from posthog.com — heights, padding, 6px/8px/6px 6px 0px 0px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://posthog.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. PostHog is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with PostHog.Rendered on the PostHog canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Get started – free | 32px | 0px 0px | 6px | #CD8407#23251D | 1px solid #B17816 | 16px / 400 |
| Get started | 47px | 0px 0px | 8px | #CD8407#111111 | 1px solid #B17816 | 18px / 500 |
| Get started - free | 35px | 0px 0px | 6px | #CD8407#111111 | 1px solid #B17816 | 18px / 600 |
| Get started | 53px | 0px 0px | 8px | #CD8407#111111 | 1px solid #B17816 | 18px / 600 |
| Install with AI | 47px | 0px 0px | 8px | #EB9D2A#111111 | 1px solid #B17816 | 18px / 500 |
| Ask PostHog anything | 40px | 10px 12px | 6px 6px 0px 0px | #B62AD9#FFFFFF | none | 14px / 600 |
| US (Virginia) | 45px | 8px 12px | 0px | transparent#374151 | 1px solid #000000 | 18px / 700 |
| Open Customers | 35px | 0px 0px | 6px | #EB9D2A#111111 | 1px solid #B17816 | 18px / 600 |
Copy-paste code
Button 1 — Get started – free
<!-- PostHog button 1: "Get started – free" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[0px] rounded-[6px] bg-[#CD8407] text-[#23251D] border-[1px] border-solid border-[#B17816] text-[16px] font-[400]">Get started – free</a>
/* plain CSS */
.btn-posthog-1 { height:32px; padding:0px 0px; border-radius:6px; background:#CD8407; color:#23251D; border:1px solid #B17816; font-size:16px; font-weight:400; }Button 2 — Get started
<!-- PostHog button 2: "Get started" -->
<a class="inline-flex items-center justify-center h-[47px] py-[0px] px-[0px] rounded-[8px] bg-[#CD8407] text-[#111111] border-[1px] border-solid border-[#B17816] text-[18px] font-[500]">Get started</a>
/* plain CSS */
.btn-posthog-2 { height:47px; padding:0px 0px; border-radius:8px; background:#CD8407; color:#111111; border:1px solid #B17816; font-size:18px; font-weight:500; }Button 3 — Get started - free
<!-- PostHog button 3: "Get started - free" -->
<a class="inline-flex items-center justify-center h-[35px] py-[0px] px-[0px] rounded-[6px] bg-[#CD8407] text-[#111111] border-[1px] border-solid border-[#B17816] text-[18px] font-[600]">Get started - free</a>
/* plain CSS */
.btn-posthog-3 { height:35px; padding:0px 0px; border-radius:6px; background:#CD8407; color:#111111; border:1px solid #B17816; font-size:18px; font-weight:600; }Button 4 — Get started
<!-- PostHog button 4: "Get started" -->
<a class="inline-flex items-center justify-center h-[53px] py-[0px] px-[0px] rounded-[8px] bg-[#CD8407] text-[#111111] border-[1px] border-solid border-[#B17816] text-[18px] font-[600]">Get started</a>
/* plain CSS */
.btn-posthog-4 { height:53px; padding:0px 0px; border-radius:8px; background:#CD8407; color:#111111; border:1px solid #B17816; font-size:18px; font-weight:600; }Button 5 — Install with AI
<!-- PostHog button 5: "Install with AI" -->
<a class="inline-flex items-center justify-center h-[47px] py-[0px] px-[0px] rounded-[8px] bg-[#EB9D2A] text-[#111111] border-[1px] border-solid border-[#B17816] text-[18px] font-[500]">Install with AI</a>
/* plain CSS */
.btn-posthog-5 { height:47px; padding:0px 0px; border-radius:8px; background:#EB9D2A; color:#111111; border:1px solid #B17816; font-size:18px; font-weight:500; }Button 6 — Ask PostHog anything
<!-- PostHog button 6: "Ask PostHog anything" -->
<a class="inline-flex items-center justify-center h-[40px] py-[10px] px-[12px] rounded-[6px_6px_0px_0px] bg-[#B62AD9] text-[#FFFFFF] text-[14px] font-[600]">Ask PostHog anything</a>
/* plain CSS */
.btn-posthog-6 { height:40px; padding:10px 12px; border-radius:6px 6px 0px 0px; background:#B62AD9; color:#FFFFFF; border:0; font-size:14px; font-weight:600; }Button 7 — US (Virginia)
<!-- PostHog button 7: "US (Virginia)" -->
<a class="inline-flex items-center justify-center h-[45px] py-[8px] px-[12px] rounded-[0px] text-[#374151] border-[1px] border-solid border-[#000000] text-[18px] font-[700]">US (Virginia)</a>
/* plain CSS */
.btn-posthog-7 { height:45px; padding:8px 12px; border-radius:0px; background:transparent; color:#374151; border:1px solid #000000; font-size:18px; font-weight:700; }Button 8 — Open Customers
<!-- PostHog button 8: "Open Customers" -->
<a class="inline-flex items-center justify-center h-[35px] py-[0px] px-[0px] rounded-[6px] bg-[#EB9D2A] text-[#111111] border-[1px] border-solid border-[#B17816] text-[18px] font-[600]">Open Customers</a>
/* plain CSS */
.btn-posthog-8 { height:35px; padding:0px 0px; border-radius:6px; background:#EB9D2A; color:#111111; border:1px solid #B17816; font-size:18px; font-weight:600; }Transition seen on these buttons: cubic-bezier(0.4, 0, 0.2, 1)
More PostHog
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 →