title: How To customize Copy To clipboard button
body: <p>Here is some code snippet that created for a cross-browser copy-to-clipboard ability. But the problem is that I can't able to customize the copy button as it is created in javascript. can anyone help?</p>
  <p>Basically, I need to add this copy to clipboard button to a code box</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function selectElementContents(el) {
      // Copy textarea, pre, div, etc.
      if (document.body.createTextRange) {
          // Internet Explorer
          var textRange = document.body.createTextRange();
          textRange.moveToElementText(el);
          textRange.select();
          textRange.execCommand("Copy");
      }
      else if (window.getSelection &amp;&amp; document.createRange) {
          // Non-Internet Explorer
          var range = document.createRange();
          range.selectNodeContents(el);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          try {
              var successful = document.execCommand('copy');
              var msg = successful ? 'successful' : 'unsuccessful';
              console.log('Copy command was ' + msg);
          }
          catch (err) {
              console.log('Oops, unable to copy');
          }
      }
  } // end function selectElementContents(el)
  
  function make_copy_button(el) {
      var copy_btn = document.createElement('input');
      copy_btn.type = "button";
      el.parentNode.insertBefore(copy_btn, el.nextSibling);
      copy_btn.onclick = function() {
          selectElementContents(el);
      };
  
      if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) &gt;= 42) {
          // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
          copy_btn.value = "Copy to Clipboard";
      }
      else {
          // Select only for Safari and older Chrome, Firefox and Opera
          copy_btn.value = "Select All (then press Ctrl + C to Copy)";
      }
  }
  /* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy,
      but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
      versions of Chrome feature detection does not work!
      See https://code.google.com/p/chromium/issues/detail?id=476508
  */
  
  make_copy_button(document.getElementById("markup"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;pre id="markup"&gt;
    Text that can be copied or selected with cross browser support.
  &lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>