Foundation 6 CSS Checkbox Styling

Currently trying to make custom CSS Checkbox's with existing CSS code.

    .nk-btn-color-dark-5 {
    background-color: #293139;
    border-color: #101215;
    border-style: solid;
}

.nk-btn-color-dark-5:hover, .nk-btn-color-dark-5.hover {
    background-color: #3b4550;
    border-color: #4a5665;
}

.nk-btn-color-dark-5:active, .nk-btn-color-dark-5.active{
    background-color: #4a5665;
    border-color: #59687a;
}

.nk-btn-color-dark-5.nk-btn-outline {
    color: #293139;
}

.nk-btn-color-dark-5.nk-btn-outline:hover, .nk-btn-color-dark-5.nk-btn-outline.hover {
    color: #14171b;
}

.nk-btn-color-dark-5.nk-btn-outline:active{
    color: black;
}
.nk-btn-hover-color-main-7.nk-btn-color-white:hover, .nk-btn-hover-color-main-7.nk-btn-color-white.hover, .nk-btn-hover-color-main-7.nk-btn-color-white:active, .nk-btn-hover-color-main-7.nk-btn-color-white.active {
    color: #fff;
}

.nk-btn-hover-color-main-7:hover, .nk-btn-hover-color-main-7.hover {
    background-color: #FFD700;
    border-color: #a5102c;
}

.nk-btn-hover-color-main-7:active, .nk-btn-hover-main-7.active {
    background-color: #FFD700;
    border-color: #a5102c;
}

                    <input id="checkbox1" type="checkbox" name="prod" value="1">
                                        <label class="nk-btn nk-btn-rounded nk-btn-color-dark-5 nk-btn-hover-color-main-7" for="checkbox1">Add to Cart</label>

Current CSS for said button. And HTML, I am unable to figure out how to make it work. I've tried as much as i know, Using this as a guidance. https://codepen.io/anon/pen/LJVgQm

Any help would be appreciated. Thanks