button-clipboard Demo

data-text attribute

<button type="button" class="js-button-clipboard" data-text="Text 1">Copy</button>

data-target attribute

General element (such as <p> element)

<p id="clipboard-target2-1">Text 2-1</p>
<button type="button" class="js-button-clipboard" data-target="clipboard-target2-1">Copy</button>

Text 2-1

Form controls (such as <textarea> element)

<p><textarea id="clipboard-target2-2">  Text 2-2
    Text 2-2</textarea></p>
<button type="button" class="js-button-clipboard" data-target="clipboard-target2-2">Copy</button>

<meta> element

<meta itemprop="clipboard-sample" content="Text 2-3" id="clipboard-target2-3" />
<button type="button" class="js-button-clipboard" data-target="clipboard-target2-3">Copy</button>

<pre> element (keep line breaks and spaces)

<pre id="clipboard-target2-4">  Text 2-4
    Text 2-4</pre>
<button type="button" class="js-button-clipboard" data-target="clipboard-target2-4">Copy</button>
  Text 2-4
    Text 2-4

data-feedback attribute

<button type="button" class="js-button-clipboard" data-text="Text 3" data-feedback="clipboard-feedback">Copy</button>
<p id="clipboard-feedback3" hidden="">✔ Clipboard write successful!</p>