: 8:23 PM
Hi Guy's Today I will Share a Create button to copy content in the code box contains very simple, very light for you to do tips blog.It's not complicated to write, just put the code in the <pre> <code> ..... </code> </pre> tags.Only use small scripts combined with Jquery library, very fast speed.
  • Demo
  • Code by4Tipsbd

Css Code

 /* Copy button by 4tipsbd */
pre{background:#ddd;margin:10px;padding:5px;font-family:consolas,monospace}
.copycode{transition:all 200ms ease-in}
.copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}
.copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:18px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #00ad62;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}
.copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#00ad62;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}
pre:hover .copycode{opacity:1}

JavaScript Put This Code Below </body> 

 $(document).ready(function(){var b=$("pre code"),a="";b.before(a)});(function(a){a.fn.selectText=function(){var e=document;var c=this[0];console.log(this,c);if(e.body.createTextRange){var b=document.body.createTextRange();b.moveToElementText(c);b.select()}else{if(window.getSelection){var d=window.getSelection();var b=document.createRange();b.selectNodeContents(c);d.removeAllRanges();d.addRange(b);document.execCommand("Copy")}}};a.fn.removeRange=function(){if(window.getSelection){if(window.getSelection().empty){window.getSelection().empty()}else{if(window.getSelection().removeAllRanges){window.getSelection().removeAllRanges()}}}else{if(document.selection){document.selection.empty()}}}})(jQuery);$(document).ready(function(){$(".copycode").click(function(){var b=$(this).parent().find("code"),a=$(this),g="Copied",f=a.text();b.selectText();a.html(g);setTimeout(function(){a.html(f);b.removeRange()},1000)})});

Html Code

 <pre>
<code>
Your Content Here
</code>
</pre>
Any type of information please Contact us.
Read more »