taste-skill / Components / Neon Buttons

Neon Button Styles

6 distinct Neon button styles extracted from neon.tech — heights, padding, 9999px/0px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Neon canvas

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	36px	`0px 18px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 500`
Get started	44px	`0px 28px`	`9999px`	`#FFFFFF` `#1A1A1A`	`none`	`16px / 500`
Log in	36px	`0px 18px`	`9999px`	`transparent` `#FFFFFF`	`1px solid #61646B`	`14px / 500`
Avoid outages	44px	`0px 16px`	`0px`	`#303236` `#FFFFFF`	`1px solid #494B50`	`16px / 500`
Save costs	44px	`0px 16px`	`0px`	`#18191B` `rgba(255, 255, 255, 0.6)`	`1px solid #494B50`	`16px / 500`
$ npx neon init	44px	`0px 28px`	`9999px`	`#34D59A` `#000000`	`none`	`16px / 500`

Copy-paste code

Button 1 — Sign up

<!-- Neon button 1: "Sign up" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[18px] rounded-[9999px] bg-[#FFFFFF] text-[#000000] text-[14px] font-[500]">Sign up</a>

/* plain CSS */
.btn-neon-1 { height:36px; padding:0px 18px; border-radius:9999px; background:#FFFFFF; color:#000000; border:0; font-size:14px; font-weight:500; }

Button 2 — Get started

<!-- Neon button 2: "Get started" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[28px] rounded-[9999px] bg-[#FFFFFF] text-[#1A1A1A] text-[16px] font-[500]">Get started</a>

/* plain CSS */
.btn-neon-2 { height:44px; padding:0px 28px; border-radius:9999px; background:#FFFFFF; color:#1A1A1A; border:0; font-size:16px; font-weight:500; }

Button 3 — Log in

<!-- Neon button 3: "Log in" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[18px] rounded-[9999px] text-[#FFFFFF] border-[1px] border-solid border-[#61646B] text-[14px] font-[500]">Log in</a>

/* plain CSS */
.btn-neon-3 { height:36px; padding:0px 18px; border-radius:9999px; background:transparent; color:#FFFFFF; border:1px solid #61646B; font-size:14px; font-weight:500; }

Button 4 — Avoid outages

<!-- Neon button 4: "Avoid outages" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[16px] rounded-[0px] bg-[#303236] text-[#FFFFFF] border-[1px] border-solid border-[#494B50] text-[16px] font-[500]">Avoid outages</a>

/* plain CSS */
.btn-neon-4 { height:44px; padding:0px 16px; border-radius:0px; background:#303236; color:#FFFFFF; border:1px solid #494B50; font-size:16px; font-weight:500; }

Button 5 — Save costs

<!-- Neon button 5: "Save costs" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[16px] rounded-[0px] bg-[#18191B] text-[rgba(255,255,255,0.6)] border-[1px] border-solid border-[#494B50] text-[16px] font-[500]">Save costs</a>

/* plain CSS */
.btn-neon-5 { height:44px; padding:0px 16px; border-radius:0px; background:#18191B; color:rgba(255, 255, 255, 0.6); border:1px solid #494B50; font-size:16px; font-weight:500; }

Button 6 — $ npx neon init

<!-- Neon button 6: "$ npx neon init" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[28px] rounded-[9999px] bg-[#34D59A] text-[#000000] text-[16px] font-[500]">$ npx neon init</a>

/* plain CSS */
.btn-neon-6 { height:44px; padding:0px 28px; border-radius:9999px; background:#34D59A; color:#000000; border:0; font-size:16px; font-weight:500; }

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

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

See taste-skill Pro →

Neon Button Styles

Rendered on the Neon canvas

Button specs

Copy-paste code

More Neon

Same component, other brands