$(function() {
$("input[type='checkbox']").change(function() {
if ($(this).is(":checked")) {
$(this).parent().addClass("active");
} else {
$(this).parent().removeClass("active");
}
})
});
/* for the lazy */
@import url(https://fonts.googleapis.com/css?family=Sanchez);
*,
*::before,
*::after {
transition: 400ms all ease-in-out 50ms;
box-sizing: border-box;
backface-visibility: hidden;
}
html,body{ font-family: 'Sanchez', serif;}
input[type="checkbox"] {
display: none;
}
/*Button is :CHECKED*/
.toggle-container.active {
background: rgba(73,168,68,1);
box-shadow: 0 0 2px rgba(73,168,68,1);
}
.toggle-container.active span:not(.tc-label) {
left: 110px;
transform: rotate(360deg);
}
/*shared*/
label,
span:not(.tc-label) {
border-radius: 50px;
}
/*'un':checked state*/
label {
height: 100px;
width: 200px;
background: rgba(43, 43, 43, 1);
position: relative;
display: block;
box-shadow: 0 0 2px rgba(43,43,43,1);
text-align: center;
}
label .tc-label {
bottom: -40px;
position: absolute;
width: 100%;
left: 0%;
}
span:not(.tc-label) {
height: 80px;
width: 80px;
background: rgba(255, 255, 255, 1);
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
}
span:not(.tc-label)::before {
content: '';
height: 60px;
width: 5px;
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 2.5px);
transform: rotate(45deg);
}
span:not(.tc-label)::after {
content: '';
height: 5px;
width: 60px;
position: absolute;
top: calc(50% - 2.5px);
left: calc(50% - 30px);
transform: rotate(45deg);
}
span:not(.tc-label)::before,
span:not(.tc-label)::after{
background: rgba(43,43,43,1);
border-radius: 5px;
}
/* pesduo class on toggle */
.toggle-container.active span:not(.tc-label)::before{
height: 50px;
top: calc(55% - 25px);
background: rgba(73,168,68,1);
}
.toggle-container.active span:not(.tc-label)::after{
width: 20px;
top: calc(95% - 25px);
background: rgba(73,168,68,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="tmcp_choice_0_0_1_1519167210" class="toggle-container">
<input class="tmcp-field ingredientepizza tmhexcolor_0_0_1_1519167210 tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_0_1519167210" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[""]" data-original-rules="[""]" data-rulestype="[""]" value=" molho de tomate_0" id="tmcp_choice_0_0_1_1519167210" tabindex="1" type="checkbox" checked="checked">
<span for="tmcp_choice_0_0_1_1519167210"></span><span class="tc-label tm-label"> molho de tomate</span></label>