colorbox.css

@import url(https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap);

/* ------------------------ RED ------------------------- */
.cb-btn-r {
    background-color: #d22b2b;
    border: 4px solid #000;
    border-radius: 7px;
    font-size: 30px;
    opacity: 90%;
    font-family: 'Titillium Web', sans-serif;
}
.cb-btn-r:hover {
    opacity: 100%;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 20px 50px 0 rgba(0, 0, 0, .19);
}

/* ------------------------ GREEN ------------------------- */
.cb-btn-g {
    background-color: #228b22;
    border: 4px solid #000;
    border-radius: 7px;
    font-size: 30px;
    opacity: 90%;
    font-family: 'Titillium Web', sans-serif;
}
.cb-btn-g:hover {
    opacity: 100%;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 20px 50px 0 rgba(0, 0, 0, .19);
}

/* ------------------------ YELLOW ------------------------- */

.cb-btn-y {
    background-color: #fdda0d;
    border: 4px solid #000;
    border-radius: 7px;
    font-size: 30px;
    opacity: 90%;
    font-family: 'Titillium Web', sans-serif;
}
.cb-btn-y:hover {
    opacity: 100%;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 20px 50px 0 rgba(0, 0, 0, .19);
}

/* ------------------------ BLUE ------------------------- */

.cb-btn-b {
    background-color: #0096ff;
    border: 4px solid #000;
    border-radius: 7px;
    font-size: 30px;
    opacity: 90%;
    font-family: 'Titillium Web', sans-serif;
}
.cb-btn-b:hover {
    opacity: 100%;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 20px 50px 0 rgba(0, 0, 0, .19);
}

/* ------------------------ WHITE ------------------------- */


.cb-btn-w {
    background-color: #fff;
    border: 4px solid #000;
    border-radius: 7px;
    font-size: 30px;
    opacity: 90%;
    font-family: 'Titillium Web', sans-serif;
}
.cb-btn-w:hover {
    opacity: 100%;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 20px 50px 0 rgba(0, 0, 0, .19);
}