.copy-code-button {
    color: #4d4d4d;
    border-radius: 4px; /* round corners to match pre tags */
    border: solid 0.5px;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;   /* keep hidden untill hover over code block */
    font-size: 1.1em;
    font-family: Helvetica;
    padding: 2px;
    padding-bottom: 0px;
}

.copy-code-button:hover {
    cursor: pointer;
    color: #000;
    background-color: #cccccc;
    display:inline-block;
}

.copy-code-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color: #E6E6E6;
    outline: 0;
}

.copy-code-button:active {
    background-color: #D9D9D9;
}

.highlight pre {
    position: relative;
}
.highlight pre:hover  .copy-code-button {
    visibility: visible;
}

pre {
  position: relative;
}

pre:hover .copy-code-button {
  visibility: visible;
}