Custom checkbox button

<label class="label">
<!-- The real checkbox -->
<input type="checkbox" class="label__input" />
<!-- The fake square -->
<div class="label__square">
<!-- The inner square -->
<div class="label__checkbox label__square--selected"></div>
</div>
<!-- The text -->
...
</div>
.label {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
}
.label__input {
/* Hide it */
display: none;
}
.label__square {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
/* Spacing */
margin-right: 8px;
padding: 4px;
}
.label__checkbox {
background-color: transparent;
border-radius: 4px;
height: 16px;
width: 16px;
}
.label__checkbox--selected {
/* For selected checkbox */
background-color: #00449e;
}

See also

Custom radio button

Radio button group