taste-skill / Components / ElevenLabs Buttons
ElevenLabs Button Styles
6 distinct ElevenLabs button styles extracted from elevenlabs.io — heights, padding, 9999px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://elevenlabs.io on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. ElevenLabs is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with ElevenLabs.Rendered on the ElevenLabs canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Contact sales | 44px | 0px 20px | 9999px | #FFFFFF#000000 | none | 16px / 400 |
| Play | 36px | 0px 14px | 9999px | #000000#FFFFFF | none | 15px / 400 |
| Discover | 32px | 0px 12px | 9999px | #FFFFFF#000000 | none | 13px / 400 |
| Skip to content | 40px | 0px 16px | 9999px | #000000#FFFFFF | none | 15px / 400 |
| Log in | 36px | 0px 14px | 9999px | #FFFFFF#000000 | none | 14px / 400 |
| Sign up | 44px | 0px 20px | 9999px | #000000#FFFFFF | none | 16px / 400 |
Copy-paste code
Button 1 — Contact sales
<!-- ElevenLabs button 1: "Contact sales" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[20px] rounded-[9999px] bg-[#FFFFFF] text-[#000000] text-[16px] font-[400] shadow-[rgb(255,255,255)_0px_0px_0px_0px,rgba(0,0,0,0.125)_0px_0px_0px_0.5px,rgba(0,0,0,0.04)_0px_1px_1px_0px,rgba(0,0,0,0.04)_0px_2px_4px_0px]">Contact sales</a>
/* plain CSS */
.btn-elevenlabs-1 { height:44px; padding:0px 20px; border-radius:9999px; background:#FFFFFF; color:#000000; border:0; font-size:16px; font-weight:400; box-shadow:rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px; }Button 2 — Play
<!-- ElevenLabs button 2: "Play" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[14px] rounded-[9999px] bg-[#000000] text-[#FFFFFF] text-[15px] font-[400]">Play</a>
/* plain CSS */
.btn-elevenlabs-2 { height:36px; padding:0px 14px; border-radius:9999px; background:#000000; color:#FFFFFF; border:0; font-size:15px; font-weight:400; }Button 3 — Discover
<!-- ElevenLabs button 3: "Discover" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[12px] rounded-[9999px] bg-[#FFFFFF] text-[#000000] text-[13px] font-[400] shadow-[rgb(255,255,255)_0px_0px_0px_0px,rgba(0,0,0,0.125)_0px_0px_0px_0.5px,rgba(0,0,0,0.04)_0px_1px_1px_0px,rgba(0,0,0,0.04)_0px_2px_4px_0px]">Discover</a>
/* plain CSS */
.btn-elevenlabs-3 { height:32px; padding:0px 12px; border-radius:9999px; background:#FFFFFF; color:#000000; border:0; font-size:13px; font-weight:400; box-shadow:rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px; }Button 4 — Skip to content
<!-- ElevenLabs button 4: "Skip to content" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[16px] rounded-[9999px] bg-[#000000] text-[#FFFFFF] text-[15px] font-[400]">Skip to content</a>
/* plain CSS */
.btn-elevenlabs-4 { height:40px; padding:0px 16px; border-radius:9999px; background:#000000; color:#FFFFFF; border:0; font-size:15px; font-weight:400; }Button 5 — Log in
<!-- ElevenLabs button 5: "Log in" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[14px] rounded-[9999px] bg-[#FFFFFF] text-[#000000] text-[14px] font-[400] shadow-[rgb(255,255,255)_0px_0px_0px_0px,rgba(0,0,0,0.125)_0px_0px_0px_0.5px,rgba(0,0,0,0.04)_0px_1px_1px_0px,rgba(0,0,0,0.04)_0px_2px_4px_0px]">Log in</a>
/* plain CSS */
.btn-elevenlabs-5 { height:36px; padding:0px 14px; border-radius:9999px; background:#FFFFFF; color:#000000; border:0; font-size:14px; font-weight:400; box-shadow:rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px; }Button 6 — Sign up
<!-- ElevenLabs button 6: "Sign up" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[20px] rounded-[9999px] bg-[#000000] text-[#FFFFFF] text-[16px] font-[400]">Sign up</a>
/* plain CSS */
.btn-elevenlabs-6 { height:44px; padding:0px 20px; border-radius:9999px; background:#000000; color:#FFFFFF; border:0; font-size:16px; font-weight:400; }Transition seen on these buttons: cubic-bezier(0.4, 0, 0.2, 1)
More ElevenLabs
ElevenLabs full token specElevenLabs style guideElevenLabs CardsElevenLabs Pricing TableAnthropic vs ElevenLabs
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 →