Refer to any button by its ID (B1–B8). Copy HTML gives an email-ready snippet; PNGs are 2400×400 — use at 50% width for crisp retina.
Email safety (verified vs caniemail):
the HTML snippet always renders as a clickable, correctly-colored button, but not pixel-identical everywhere.
Apple Mail: full design incl. 3D lip + Choclement font.
Outlook.com / new Outlook: pill + lip, Arial fallback.
Gmail: rounded pill but flat (lip stripped), Arial fallback.
Outlook for Windows: square flat button (snippets force Arial there, so no Times New Roman).
For the exact design in every client, use the PNG image inside your link.
B1
SHOP NOW
Purple / white text · Choclement (brand font) · 2400×400 retina
cta-shop-now-purple-choclement-transparent.png · cta-shop-now-purple-choclement-cream.png
Choclement in live email needs the hosted font; most clients fall back to bold Arial. For the exact look everywhere, use the PNG.
B2
SHOP NOW
Purple / white text · Bold sans (email-safe) · 2400×400 retina
cta-shop-now-purple-sans-transparent.png · cta-shop-now-purple-sans-cream.png
B3
SHOP NOW
White / purple text · Choclement (brand font) · 2400×400 retina
cta-shop-now-white-choclement-transparent.png · cta-shop-now-white-choclement-cream.png
Choclement in live email needs the hosted font; most clients fall back to bold Arial. For the exact look everywhere, use the PNG.
B4
SHOP NOW
White / purple text · Bold sans (email-safe) · 2400×400 retina
cta-shop-now-white-sans-transparent.png · cta-shop-now-white-sans-cream.png
B5
TREAT YOUR CYCLE
Purple / white text · Choclement (brand font) · 2400×400 retina
cta-treat-your-cycle-purple-choclement-transparent.png · cta-treat-your-cycle-purple-choclement-cream.png
Choclement in live email needs the hosted font; most clients fall back to bold Arial. For the exact look everywhere, use the PNG.
B6
TREAT YOUR CYCLE
Purple / white text · Bold sans (email-safe) · 2400×400 retina
cta-treat-your-cycle-purple-sans-transparent.png · cta-treat-your-cycle-purple-sans-cream.png
B7
TREAT YOUR CYCLE
White / purple text · Choclement (brand font) · 2400×400 retina
cta-treat-your-cycle-white-choclement-transparent.png · cta-treat-your-cycle-white-choclement-cream.png
Choclement in live email needs the hosted font; most clients fall back to bold Arial. For the exact look everywhere, use the PNG.
B8
TREAT YOUR CYCLE
White / purple text · Bold sans (email-safe) · 2400×400 retina
cta-treat-your-cycle-white-sans-transparent.png · cta-treat-your-cycle-white-sans-cream.png
R1
O Positiv replica (reference)
For side-by-side comparison only
replica-opositiv-shop-now.png
