taste-skill / Components / Inngest Buttons

Inngest Button Styles

4 distinct Inngest button styles extracted from inngest.com — heights, padding, 6px radius, colors — with copy-paste CSS and Tailwind classes.

Source: computed styles extracted from https://www.inngest.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Inngest is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Inngest.

Rendered on the Inngest canvas

START FREE READ THE DOCS START FREE START FREE

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
START FREE	42px	`0px 20px`	`6px`	`#FFFFFF` `#000000`	`none`	`12px / 600`
READ THE DOCS	42px	`0px 20px`	`6px`	`transparent` `#FFFFFF`	`none`	`12px / 600`
START FREE	32px	`0px 20px`	`6px`	`#FFFFFF` `#000000`	`none`	`12px / 600`
START FREE	42px	`0px 20px`	`6px`	`#F65C4F` `#FFFFFF`	`none`	`12px / 600`

Copy-paste code

Button 1 — START FREE

<!-- Inngest button 1: "START FREE" -->
<a class="inline-flex items-center justify-center h-[42px] py-[0px] px-[20px] rounded-[6px] bg-[#FFFFFF] text-[#000000] text-[12px] font-[600] shadow-[rgb(255,255,255)_0px_0px_0px_2px_inset]">START FREE</a>

/* plain CSS */
.btn-inngest-1 { height:42px; padding:0px 20px; border-radius:6px; background:#FFFFFF; color:#000000; border:0; font-size:12px; font-weight:600; box-shadow:rgb(255, 255, 255) 0px 0px 0px 2px inset; }

Button 2 — READ THE DOCS

<!-- Inngest button 2: "READ THE DOCS" -->
<a class="inline-flex items-center justify-center h-[42px] py-[0px] px-[20px] rounded-[6px] text-[#FFFFFF] text-[12px] font-[600] shadow-[rgb(255,255,255)_0px_0px_0px_2px_inset]">READ THE DOCS</a>

/* plain CSS */
.btn-inngest-2 { height:42px; padding:0px 20px; border-radius:6px; background:transparent; color:#FFFFFF; border:0; font-size:12px; font-weight:600; box-shadow:rgb(255, 255, 255) 0px 0px 0px 2px inset; }

Button 3 — START FREE

<!-- Inngest button 3: "START FREE" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[20px] rounded-[6px] bg-[#FFFFFF] text-[#000000] text-[12px] font-[600] shadow-[rgb(255,255,255)_0px_0px_0px_2px_inset]">START FREE</a>

/* plain CSS */
.btn-inngest-3 { height:32px; padding:0px 20px; border-radius:6px; background:#FFFFFF; color:#000000; border:0; font-size:12px; font-weight:600; box-shadow:rgb(255, 255, 255) 0px 0px 0px 2px inset; }

Button 4 — START FREE

<!-- Inngest button 4: "START FREE" -->
<a class="inline-flex items-center justify-center h-[42px] py-[0px] px-[20px] rounded-[6px] bg-[#F65C4F] text-[#FFFFFF] text-[12px] font-[600]">START FREE</a>

/* plain CSS */
.btn-inngest-4 { height:42px; padding:0px 20px; border-radius:6px; background:#F65C4F; color:#FFFFFF; border:0; font-size:12px; font-weight:600; }

Transition seen on these buttons: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1)

More Inngest

Inngest full token spec Inngest style guide Inngest Cards Inngest Pricing Table Trigger.dev vs Inngest

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Raycast Buttons Cursor Buttons Mintlify Buttons Dub Buttons Trigger.dev Buttons PlanetScale Buttons Neon Buttons

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →