ZeroClipBoard

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.2/ZeroClipboard.min.js"></script>
<button
  class="clipboard fa fa-copy"
  data-clipboard-text="Copied Button 1 Text"
  title="Copy button 1 text"></button>
<button
  class="clipboard fa fa-copy"
  data-clipboard-text="Copied Button 2 Text"
  title="Copy button 2 text"></button>

<div id="logger"></div>

CSS

button.clipboard {
    padding: 3px;
}
/* FF button fix */
button.clipboard::-moz-focus-inner {
    margin: 1px -5px;
}
ZeroClipboardZeroClipboardTRAN MINH DUCTRAN MINH DUCTRAN MINH DUCTRAN MINH DUCTRAN MINH DUCTRAN MINH DUCTRAN MINH DUCTRAN MINH DUC

JavaScript

ZeroClipboard.config({
    moviePath: '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.2/ZeroClipboard.swf',
    forceHandCursor: true,
    debug: true
});

ZeroClipboard.prototype.showActive = (function(el) {
    $(el).fadeOut(10, function() { $(el).fadeIn(90) });
});

zeroclipboard = new ZeroClipboard($('button[data-clipboard-text]'));
    
zeroclipboard.on('load', function(client) {
    // console.log('loaded', ZeroClipboard.config());
    zeroclipboard.on('complete', function(client, args) {
        // console.log('complete', args, $(this));
        $('#logger').prepend(args.text + '<br>');
        zeroclipboard.showActive(this);        
    });
});