copy to clipboard button style

[RainKolwa]

Describe the bug

If the code sample reached a bit long, the copy button and copied tip are not clear enough to recognize.

Reproduction

Expected behavior

copy button to be clear.

System Info

-

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[Zelig880]

The buttons currently use opacity to achieve the light hover effect, but it would probably benefit to have a solid colour (as the hover effect is a solid colour anyway(.

For future reference this is the class (and CSS variable) that handle the hover effect of the copy button:

We could change and actually define some borders instead than background-colour. This is an example of using (--vp-c-text-3) - (yeah I know it is for text, I was just trying to use existing colors):

Note: If we do use background color, we should also make sure we add a black border when the button is not hovered, to avoid flicks and movement when the button is hovered!

[kiaking]

Yeah I've used opacity to make style customization a bit easier but seems like we have to use solid background 😅

I'm fine with that. This issue is on the 1.0.0 milestone so eventually I'll fix this 👍

[g4rry420]

Hi, Can I work on this issue ?
I am thinking of using this color rgba(38,38,38,255) which will be closest to that opacity of black color.