So you want your own buttons that copy directly to clipboard like this?

First of all, here's the script code you'll need to include in your page's HTML editor. Put this somewhere safe near the end of your page before the /body tag (preferably after your main content but before any CSS/style code begins). This script code is the part that enables the magical 'add to clipboard' function. You don't need to edit this part at all, just throw it in there.

<script> function myFunction(previousSibling) { var copyText = previousSibling; copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); alert("Copied the text: " + copyText.value); } </script>
making you copy these manually so you don't rely on this technology too much ;)

Once you have the script code in place, you can start adding buttons! I keep my buttons in rows of 3 so they're neatly organized but you can do whatever you want! Here's the code for just one button. To change the text that gets copied to clipboard, just replace the 'EXAMPLE' text with whatever you want:

<div> <input type="text" value="EXAMPLE" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div>

If you want to change your button color, just change the part of the code that says 'background:red;color:red;'. Here's an example where I changed this text to 'background:magenta; color:magenta;'.

O

I definitely recommend deciding on your button color and style before you start adding a bunch of them. I decided to change from square buttons to round buttons ('border-radius: 50%') after I'd already added loads of tables and codes. This was easily fixed by using Find and Replace on Visual Studio but still, extra effort!

If you're unfamiliar with tables and just want a ready-made block of buttons you can easily drop in and edit, here's a block of 9 to get you started. Just grab this code and paste away -all you'll need to change is the EXAMPLE text:

<table> <tr><td><div> <input type="text" value="EXAMPLE 1" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td> <td><div> <input type="text" value="EXAMPLE 2" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td> <td><div> <input type="text" value="EXAMPLE 3" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td></tr> <tr><td><div> <input type="text" value="EXAMPLE 4" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td> <td><div> <input type="text" value="EXAMPLE 5" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td> <td><div> <input type="text" value="EXAMPLE 6" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td></tr> <tr><td><div> <input type="text" value="EXAMPLE 7" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td> <td><div> <input type="text" value="EXAMPLE 8" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td> <td><div> <input type="text" value="EXAMPLE 9" id="myInput" > <button style="background:red;color:red; border-radius: 50%;" button onclick="myFunction(this.parentNode.children[0])" > O </button> </div></td></tr> </table>

O	O	O
O	O	O
O	O	O

And that's about it! Have fun with your new button page. You don't need to credit me at all if you use any of this, but if you want to link back to me, feel free to use the code below to add this banner:

<a href='https://zaibatsucorp.neocities.org'><img src='https://zaibatsucorp.neocities.org/adbanner.gif' width='400'></a>

Check out our Sound Commands page for a live demo of these buttons. I made this because our channel has waaaay too many sound commands! I wanted something that could be customized and could include our own branding, so this is a great alternative to using pastebin or cluttering up your chat with long bot lists.