Copy Quote
Quote with a small Copy button that copies the text to the clipboard and flashes a Copied! confirmation — perfect for sharable design and engineering quote walls.
Copy Quote the 19th of 19 designs in the 19 CSS Blockquote Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<figure class="cbq-copy">
<button type="button" class="cbq-copy-btn" aria-label="Copy quote to clipboard">
<svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14">
<rect
x="9"
y="9"
width="11"
height="11"
rx="2"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
<path
d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<span class="cbq-copy-label">Copy</span>
</button>
<blockquote class="cbq-copy-quote">
<p>"Premature optimization is the root of all evil."</p>
</blockquote>
<figcaption>— Donald Knuth</figcaption>
</figure> .cbq-copy {
position: relative;
max-width: 340px;
padding: 22px;
background: #18181f;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-copy-btn {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.04);
color: #a78bfa;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
font: inherit;
font-size: 11px;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
}
.cbq-copy-btn:hover {
background: rgba(167, 139, 250, 0.12);
border-color: rgba(167, 139, 250, 0.45);
}
.cbq-copy-btn:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}
.cbq-copy-btn.is-copied {
color: #2ecc8a;
border-color: rgba(46, 204, 138, 0.45);
background: rgba(46, 204, 138, 0.08);
}
.cbq-copy-quote {
margin: 0;
padding-right: 56px;
}
.cbq-copy-quote p {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
font-style: italic;
}
.cbq-copy figcaption {
margin-top: 14px;
font-size: 12px;
color: #b8b6d4;
} (function () {
document.querySelectorAll(".cbq-copy").forEach(function (root) {
var btn = root.querySelector(".cbq-copy-btn");
var label = root.querySelector(".cbq-copy-label");
var quote = root.querySelector(".cbq-copy-quote");
if (!btn || !label || !quote) return;
btn.addEventListener("click", function () {
var text = quote.textContent.trim();
navigator.clipboard.writeText(text).then(function () {
btn.classList.add("is-copied");
label.textContent = "Copied!";
setTimeout(function () {
btn.classList.remove("is-copied");
label.textContent = "Copy";
}, 1600);
});
});
});
})();