Webflow copy email button (click to copy)

What you receive in Webflow

• 14 native elements and 11 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• 4 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="ce">
  <div class="ce-card">
    <p class="ce-eyebrow">Say hello</p>
    <h2 class="ce-title">Have a project in mind?</h2>
    <p class="ce-text">Click the address to copy it. No mail app opening, no lost tab.</p>
    <button class="ce-btn" type="button" data-email="hello@yourstudio.com">
      <span class="ce-label">hello@yourstudio.com</span>
      <span class="ce-icon" aria-hidden="true">
        <svg class="ce-copy" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg>
        <svg class="ce-check" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>
      </span>
    </button>
    <p class="ce-status" role="status" aria-live="polite"></p>
  </div>
</section>
<style>
.ce { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #eef2ff; color: #111827; padding: 112px 24px; }
.ce-card { max-width: 560px; margin: 0 auto; background: #ffffff; border: 1px solid #e0e7ff; border-radius: 28px; padding: 48px; text-align: center; box-shadow: 0 30px 60px -30px rgba(67, 56, 202, 0.35); }
.ce-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6366f1; margin: 0 0 14px; }
.ce-title { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
.ce-text { font-size: 17px; line-height: 1.6; color: #4b5563; margin: 0 0 32px; }
.ce-btn { display: inline-flex; align-items: center; gap: 14px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: 700; color: #ffffff; background: #4338ca; border: 0; border-radius: 999px; padding: 16px 18px 16px 26px; cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; }
.ce-btn:hover { background: #3730a3; transform: translateY(-2px); }
.ce-btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.ce-btn.is-copied { background: #059669; }
.ce-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ce-icon svg { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease; }
.ce-check { opacity: 0; transform: scale(0.4); }
.ce-btn.is-copied .ce-copy { opacity: 0; transform: scale(0.4); }
.ce-btn.is-copied .ce-check { opacity: 1; transform: scale(1); }
.ce-status { min-height: 22px; font-size: 15px; color: #059669; margin: 18px 0 0; }
@media (max-width: 767px) { .ce { padding: 72px 16px; } .ce-card { padding: 36px 22px; } .ce-title { font-size: 28px; } .ce-btn { font-size: 15px; padding-left: 20px; } }
</style>
<script>
document.querySelectorAll(".ce-btn").forEach(function (btn) {
  var label = btn.querySelector(".ce-label");
  var status = btn.parentNode.querySelector(".ce-status");
  var email = btn.getAttribute("data-email") || label.textContent.trim();
  var timer;
  function done() {
    btn.classList.add("is-copied");
    label.textContent = "Copied to clipboard";
    if (status) status.textContent = email + " is ready to paste.";
    clearTimeout(timer);
    timer = setTimeout(function () { btn.classList.remove("is-copied"); label.textContent = email; if (status) status.textContent = ""; }, 2200);
  }
  function fallback() {
    var t = document.createElement("textarea");
    t.value = email; t.setAttribute("readonly", ""); t.style.position = "fixed"; t.style.opacity = "0";
    document.body.appendChild(t); t.select();
    try { document.execCommand("copy"); } catch (e) {}
    document.body.removeChild(t); done();
  }
  btn.addEventListener("click", function () {
    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(email).then(done, fallback);
    else fallback();
  });
});
</script>