Make the copy button more subtle

[damithc]

Currently, the button attracts too much attention.

Can we make it more subtle?

[KendrickAng]

@ang-zeyu Is this issue still relevant? I tried to find the cs2103/T website to play with and noticed that the copy button no longer exists, and I also didn't find any mention of it in the User Guide:

[ang-zeyu]

I think it (plugin) may have been toggled off there, you can refer to the ug for how to toggle it on https://markbind.org/userGuide/usingPlugins.html#plugin-codeblockcopybuttons

[KendrickAng]

I was reading an article about button UI https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112 and thought that a line button might be what we want here; what do you think?

[damithc]

I was reading an article about button UI https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112 and thought that a line button might be what we want here; what do you think?

Also, appear only on hover?

[KendrickAng]

Hmm if the button appears only on hover, how would the user know the copy button is there?

[ang-zeyu]

Also, appear only on hover?

This might make the button redundant I think, the reader's first instinct would then be to just drag-and-ctrl-c the code

I was reading an article about button UI https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112 and thought that a line button might be what we want here; what do you think?

Sounds good, or just leave the copy icon, anything to avoid drawing too much attention to the buttons

Something to keep in mind when styling it: #1355

[KendrickAng]

To add on to ^ zeyu's comment, here's an example using just an icon from https://javascript.info/dom-nodes: