taste-skill / Components / Resend Buttons
Resend Button Styles
4 distinct Resend button styles extracted from resend.com — heights, padding, 16px/4px/9999px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://resend.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Resend is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Resend.Rendered on the Resend canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Get started | 40px | 0px 16px | 16px | transparent#FFFFFF | 2px solid rgba(255, 255, 255, 0.05) | 14px / 600 |
| Get started | 48px | 0px 20px | 16px | transparent#FFFFFF | 2px solid rgba(255, 255, 255, 0.05) | 16px / 600 |
| Get Started | 41px | 12px 20px | 4px | #00A3FF#FFFFFF | none | 14px / 600 |
| Send | 32px | 5px 12px | 9999px | transparent#F0F0F0 | 1px solid rgba(212, 234, 255, 0.19) | 14px / 400 |
Copy-paste code
Button 1 — Get started
<!-- Resend button 1: "Get started" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[16px] rounded-[16px] text-[#FFFFFF] border-[2px] border-solid border-[rgba(255,255,255,0.05)] text-[14px] font-[600] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0.1)_0px_1px_3px_0px,rgba(0,0,0,0.1)_0px_1px_2px_-1px]">Get started</a>
/* plain CSS */
.btn-resend-1 { height:40px; padding:0px 16px; border-radius:16px; background:transparent; color:#FFFFFF; border:2px solid rgba(255, 255, 255, 0.05); font-size:14px; font-weight:600; 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) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; backdrop-filter:blur(25px); }Button 2 — Get started
<!-- Resend button 2: "Get started" -->
<a class="inline-flex items-center justify-center h-[48px] py-[0px] px-[20px] rounded-[16px] text-[#FFFFFF] border-[2px] border-solid border-[rgba(255,255,255,0.05)] text-[16px] font-[600] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0.1)_0px_1px_3px_0px,rgba(0,0,0,0.1)_0px_1px_2px_-1px]">Get started</a>
/* plain CSS */
.btn-resend-2 { height:48px; padding:0px 20px; border-radius:16px; background:transparent; color:#FFFFFF; border:2px solid rgba(255, 255, 255, 0.05); font-size:16px; font-weight:600; 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) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; backdrop-filter:blur(25px); }Button 3 — Get Started
<!-- Resend button 3: "Get Started" -->
<a class="inline-flex items-center justify-center h-[41px] py-[12px] px-[20px] rounded-[4px] bg-[#00A3FF] text-[#FFFFFF] text-[14px] font-[600]">Get Started</a>
/* plain CSS */
.btn-resend-3 { height:41px; padding:12px 20px; border-radius:4px; background:#00A3FF; color:#FFFFFF; border:0; font-size:14px; font-weight:600; }Button 4 — Send
<!-- Resend button 4: "Send" -->
<a class="inline-flex items-center justify-center h-[32px] py-[5px] px-[12px] rounded-[9999px] text-[#F0F0F0] border-[1px] border-solid border-[rgba(212,234,255,0.19)] text-[14px] font-[400]">Send</a>
/* plain CSS */
.btn-resend-4 { height:32px; padding:5px 12px; border-radius:9999px; background:transparent; color:#F0F0F0; border:1px solid rgba(212, 234, 255, 0.19); font-size:14px; font-weight:400; }Transition seen on these buttons: cubic-bezier(0.4, 0, 0.2, 1)
More Resend
Resend full token specResend style guideResend CardsResend Pricing TableResend vs LoopsResend vs MintlifyResend vs NeonResend vs Railway
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 →