Copy URL to Clipboard on Button Click Example

In this article, we discuss about Copy URL to Clipboard on Button Click Example

Copy URL to Clipboard on Button Click Example

Copy URL to Clipboard on Button Click Example

HTML

<div class="background">
<div class="text-center">
  <button class="clipboard">Click me to copy current Url</button>
  <p>Have you already clicked?</p>
</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Karla:400,700');

body {
  padding: 20px;
  margin: 0;
  color: #04048c;
  font-family: 'Karla', sans-serif;
}
  
  .background {
    background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
    height: calc(100vh - 20px * 2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text-center{
  text-align: center;
}
  .clipboard {
    border: 0;
    padding: 15px;
    border-radius: 3px;
    background-image: linear-gradient( 135deg, #FDEB71 10%, #F8D800 100%);
    cursor: pointer;
    color: #04048c;
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    position: relative;
    top: 0;
    transition: all .2s ease;
    
  }
  
.clipboard :hover {
      top: 2px;
    }
  p {
    font-weight: 700;
  }

In the below we will complete only design

url copy
Copy URL to Clipboard on Button Click Example

Then Next we add in the below code in js file

JQUERY

var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
  $("body").append($temp);
  $temp.val($url).select();
  document.execCommand("copy");
  $temp.remove();
  $("p").text("URL copied!");
})

Output:

url copyer 1
Copy URL to Clipboard on Button Click Example

Also Checkout Tags or Chips with Bootstrap

If you interested in Entertainment genre please check this also Prabhas Age, Biography, Wiki, Family, Filmography & More

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *