taste-skill / Components / Upstash Buttons

Upstash Button Styles

7 distinct Upstash button styles extracted from upstash.com — heights, padding, 10px/16px 16px 0px 0px/12px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Upstash canvas

Button QStash Explore Redis Documentation Create Database Caching TypeScript

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Button	40px	`0px 20px`	`10px`	`#FFFFFF` `#065F46`	`none`	`16px / 500`
QStash	64px	`0px 32px`	`16px 16px 0px 0px`	`#F5F5F5` `#71717B`	`2px solid rgba(0, 115, 89, 0.08)`	`24px / 600`
Explore Redis	42px	`8px 20px`	`12px`	`rgba(0, 115, 89, 0.08)` `#007A55`	`none`	`16px / 500`
Documentation	42px	`8px 20px`	`12px`	`rgba(5, 95, 70, 0.2)` `#007A55`	`none`	`16px / 500`
Create Database	42px	`8px 20px`	`12px`	`#00BC7D` `#FFFFFF`	`none`	`16px / 500`
Caching	32px	`0px 12px`	`6px`	`#FFFFFF` `#000000`	`none`	`16px / 400`
TypeScript	32px	`0px 20px`	`0px`	`#000000` `#FFFFFF`	`2px solid #10B981`	`13px / 400`

Copy-paste code

Button 1 — Button

<!-- Upstash button 1: "Button" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[20px] rounded-[10px] bg-[#FFFFFF] text-[#065F46] text-[16px] font-[500]">Button</a>

/* plain CSS */
.btn-upstash-1 { height:40px; padding:0px 20px; border-radius:10px; background:#FFFFFF; color:#065F46; border:0; font-size:16px; font-weight:500; }

Button 2 — QStash

<!-- Upstash button 2: "QStash" -->
<a class="inline-flex items-center justify-center h-[64px] py-[0px] px-[32px] rounded-[16px_16px_0px_0px] bg-[#F5F5F5] text-[#71717B] border-[2px] border-solid border-[rgba(0,115,89,0.08)] text-[24px] font-[600]">QStash</a>

/* plain CSS */
.btn-upstash-2 { height:64px; padding:0px 32px; border-radius:16px 16px 0px 0px; background:#F5F5F5; color:#71717B; border:2px solid rgba(0, 115, 89, 0.08); font-size:24px; font-weight:600; }

Button 3 — Explore Redis

<!-- Upstash button 3: "Explore Redis" -->
<a class="inline-flex items-center justify-center h-[42px] py-[8px] px-[20px] rounded-[12px] bg-[rgba(0,115,89,0.08)] text-[#007A55] text-[16px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0.05)_0px_1px_2px_0px]">Explore Redis</a>

/* plain CSS */
.btn-upstash-3 { height:42px; padding:8px 20px; border-radius:12px; background:rgba(0, 115, 89, 0.08); color:#007A55; border:0; font-size:16px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; }

Button 4 — Documentation

<!-- Upstash button 4: "Documentation" -->
<a class="inline-flex items-center justify-center h-[42px] py-[8px] px-[20px] rounded-[12px] bg-[rgba(5,95,70,0.2)] text-[#007A55] text-[16px] font-[500]">Documentation</a>

/* plain CSS */
.btn-upstash-4 { height:42px; padding:8px 20px; border-radius:12px; background:rgba(5, 95, 70, 0.2); color:#007A55; border:0; font-size:16px; font-weight:500; }

Button 5 — Create Database

<!-- Upstash button 5: "Create Database" -->
<a class="inline-flex items-center justify-center h-[42px] py-[8px] px-[20px] rounded-[12px] bg-[#00BC7D] text-[#FFFFFF] text-[16px] font-[500]">Create Database</a>

/* plain CSS */
.btn-upstash-5 { height:42px; padding:8px 20px; border-radius:12px; background:#00BC7D; color:#FFFFFF; border:0; font-size:16px; font-weight:500; }

Button 6 — Caching

<!-- Upstash button 6: "Caching" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[12px] rounded-[6px] bg-[#FFFFFF] text-[#000000] text-[16px] font-[400]">Caching</a>

/* plain CSS */
.btn-upstash-6 { height:32px; padding:0px 12px; border-radius:6px; background:#FFFFFF; color:#000000; border:0; font-size:16px; font-weight:400; }

Button 7 — TypeScript

<!-- Upstash button 7: "TypeScript" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[20px] rounded-[0px] bg-[#000000] text-[#FFFFFF] border-[2px] border-solid border-[#10B981] text-[13px] font-[400]">TypeScript</a>

/* plain CSS */
.btn-upstash-7 { height:32px; padding:0px 20px; border-radius:0px; background:#000000; color:#FFFFFF; border:2px solid #10B981; font-size:13px; font-weight:400; }

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 →

Upstash Button Styles

Rendered on the Upstash canvas

Button specs

Copy-paste code

More Upstash

Same component, other brands