Copy code button styles

These styles make the copy code button plugin feel like a natural part of your code blocks. Subtle but still clear.¹

How to use

Add the copy code button plugin script to your footer (Dashboard → Settings → Header and footer directives), then add the styles below to your theme. The copy button blends nicely with the rest of your code styling without drawing too much attention.

Styles

/* Copy code button styles | robertbirming.com */
.copy-code-button {
  padding: 0.25rem;
  color: var(--text);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .highlight:hover .copy-code-button {
    opacity: 0.9;
  }
}

Want more? Check out the add-ons. Happy blogging, and happy copying.