taste-skill / Components / Framer Buttons
Framer Button Styles
3 distinct Framer button styles extracted from framer.com — heights, padding, 8px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://www.framer.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Framer is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Framer.Rendered on the Framer canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Sign up | 30px | 8px 10px | 8px | #FFFFFF#0000EE | none | 12px / 400 |
| Get started for free | 34px | 10px 14px | 8px | #FFFFFF#0000EE | none | 12px / 400 |
| Copy | 30px | 0px 10px | 8px | #1F1F1F#000000 | none | 12px / 400 |
Copy-paste code
Button 1 — Sign up
<!-- Framer button 1: "Sign up" -->
<a class="inline-flex items-center justify-center h-[30px] py-[8px] px-[10px] rounded-[8px] bg-[#FFFFFF] text-[#0000EE] text-[12px] font-[400]">Sign up</a>
/* plain CSS */
.btn-framer-1 { height:30px; padding:8px 10px; border-radius:8px; background:#FFFFFF; color:#0000EE; border:0; font-size:12px; font-weight:400; }Button 2 — Get started for free
<!-- Framer button 2: "Get started for free" -->
<a class="inline-flex items-center justify-center h-[34px] py-[10px] px-[14px] rounded-[8px] bg-[#FFFFFF] text-[#0000EE] text-[12px] font-[400]">Get started for free</a>
/* plain CSS */
.btn-framer-2 { height:34px; padding:10px 14px; border-radius:8px; background:#FFFFFF; color:#0000EE; border:0; font-size:12px; font-weight:400; }Button 3 — Copy
<!-- Framer button 3: "Copy" -->
<a class="inline-flex items-center justify-center h-[30px] py-[0px] px-[10px] rounded-[8px] bg-[#1F1F1F] text-[#000000] text-[12px] font-[400]">Copy</a>
/* plain CSS */
.btn-framer-3 { height:30px; padding:0px 10px; border-radius:8px; background:#1F1F1F; color:#000000; border:0; font-size:12px; font-weight:400; }Transition seen on these buttons: ease
More Framer
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 →