.button-300-150 {
    background-image: url('button-300-150.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.button-300-150.button-active {
    background-image: url('button-300-150-active.png');
}

.button-300-150.button-active .button-text {
    color: black;
}

.button-150-300 {
    background-image: url('button-150-300.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.button-150-300.button-active {
    background-image: url('button-150-300-active.png');
}

.button-150-300.button-active .button-text {
    color: black;
}

.button-300-300 {
    background-image: url('button-300-300.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.button-300-300.button-active {
    background-image: url('button-300-300-active.png');
}

.button-300-300.button-active .button-text {
    color: black;
}

.button-80 {
    background-image: url('button-80.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.button-80.button-active {
    background-image: url('button-80-active.png');
}

.button-80.button-active .button-text {
    color: black;
}


.button-80 .button-text {
    color: white;
}

.button-text {
    width: 100%;
    top: 50%;
    margin-top: -0.5em;
    position: absolute;
    text-align: center;
    color: white;
}