Turn Netlify links into buttons using GitHub design tokens (Firefox user CSS)

userContent.css

/**
 * Make Netlify deploy preview links on GitHub stand out.
 */
@-moz-document domain("github.com") {
    /* Turn Netlify links into buttons using GitHub design tokens. */
    .comment-body a[href$="netlify.app"] {
        position: relative;
        display: block;
        margin-block: 1em;
        padding: 1em;
        overflow: hidden;
        font-weight: 500;
        color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text)) !important;
        border: 1px solid var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
        border-radius: 6px;
        background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg)) !important;
        box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)),var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
    }

    .comment-body a[href$="netlify.app"]::after {
        content: "Preview";
        position: absolute;
        inset: 1px ;
        display: grid;
        place-content: center;
        font-size: 1.25rem;
        color: inherit;
        background-color: inherit;
    }

    .comment-body a[href$="netlify.app"]:hover {
        border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
        background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg)) !important;
    }

    .comment-body a[href$="netlify.app"]:active {
        border-color: var(--button-primary-borderColor-active, var(--color-btn-active-border));
        background-color: var(--button-primary-bgColor-active, var(--color-btn-active-bg)) !important;
        box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
    }

    /* Spirit Design System: Adjust individual button labels by URL. */
    .comment-body a[href$="spirit-design-system-demo.netlify.app"]::after {
        content: "CSS Preview";
    }

    .comment-body a[href$="spirit-design-system-react.netlify.app"]::after {
        content: "React Preview";
    }

    .comment-body a[href$="spirit-design-system-storybook.netlify.app"]::after {
        content: "Storybook Preview";
    }

    .comment-body a[href$="spirit-design-system-validations.netlify.app"]::after {
        content: "Form Validations Preview";
    }
}

Example:

👉 How to Create a userChrome.css File