5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:T84a,

Clicky Mail is a playful Call-to-action component that transforms into a copy-to-clipboard button on hover.

Built for Framer, it makes sharing your email address frictionless, fun, and stylish. Perfect for portfolios, landing pages, or contact sections, this component adds both utility and micro-interaction delight.

Instructions

Copy and paste the component into your project file.
Enter your email address in the property control.
Customize the CTA text (e.g. “Get in touch”).
Adjust colors, fonts, sizes, and layout to match your design system.
Test the hover → copy interaction directly inside Framer.

How It Works

The component features 4 main property controls:

Email Address: Text input for the email to be copied.
CTA Text: Text input for the default button label.
Typography: Controls to adjust font family, size, and weight.
Colors: Pickers for text, background, and hover states.

Main Features

Plug & Play: Works instantly with no setup required.
Copy to Clipboard: One-click email copy on hover.
Fully Customizable: Colors, text, font, and button styles.
Responsive Design: Fits in any layout.
Smooth Interaction: Hover transition built-in.
Contact-Friendly: A modern alternative to mailto: links.

Use Cases

Portfolios that need a sleek “get in touch” section.
Landing pages with instant email copy interaction.
Freelancers, agencies, or consultants showcasing contact CTAs.
Contact cards or “About Me” sections on personal websites.
Product pages with quick email support access.

Made by Le Lab Framer with love.

59:[["$","$L5c",null,{"post":{"id":"01999af5-f3ed-7ffd-afd8-5be600b85d9b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"90e4e37c-af80-4548-be44-2876a68db97f","name":"Kevin Hardmeier","slug":"kevin-hardmeier-yz57lv","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398754/avatar-VGOPJ1wU2wbxUffhhhshKj4hVo6D3A.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"VyF7iXUf4vgv3FpD1FKm","resolved":true,"title":"Copy Email","body":"$5d","bodyJson":null,"introduction":"","slug":"copy-email","author":{"framerUserId":"90e4e37c-af80-4548-be44-2876a68db97f","name":"Kevin Hardmeier","slug":"kevin-hardmeier-yz57lv","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398754/avatar-VGOPJ1wU2wbxUffhhhshKj4hVo6D3A.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/VyF7iXUf4vgv3FpD1FKm/copy-email-mWBsCo58vvQ9NJUR7qXMb0sU7OsNUD"}],"post":null,"createdAt":"2025-09-23T18:59:58.410Z","updatedAt":"2025-09-30T12:18:44.394Z","publishedAt":"2025-09-30T14:10:34.093Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/clicky-mail-w5Em.js@LlNVgNyTxbYzQ7zJw4RE","previewUrl":"https://clickymail.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"LlNVgNyTxbYzQ7zJw4RE"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-30T14:10:34.093Z","updatedAt":"2025-09-30T14:10:34.093Z","reported":false}}],"$L5e"]

Suggested for you