The problem I have is that I want to make a button to copy a text to the clipboard on my web page, but the button appears like this:
And I want it to look something like this:
(when you hover the mouse over it, it changes color to a light blue tone)
The HTML code I am using is the one from Clipboardjs.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
I hope someone knows the solution. Thanks.
Add the image and resize the button by styling it like so:
Although it is better to have the styles separated as @Cig says. I've also added the functionality you ask for from Clipboardjs.com.
Here you have a button with a style and your IP.
Just paste this into the HTML editor:
For that, css is enough, you can use a separate css sheet or directly from the HTML through the tags
<style type="text/css"></style>
inside the tags<head></head>
of your document and the javascript inside the tags.<script type="text/javascript"></script>