<ul class="checkbox-group">
  <li ng-repeat="box in checkbox">
    <i class="checkbox-x"></i>
    <input type="checkbox" name="cb1" id="cb1" class="checkbox-selector" />
    <label for="cb1" >Checkbox 1</label>
  </li>
  <li ng-repeat="box in checkbox">
    <i class="checkbox-x"></i>
    <input type="checkbox" name="cb2" id="cb2" class="checkbox-selector" />
    <label for="cb2" >Checkbox 2</label>
  </li>
  <li ng-repeat="box in checkbox">
    <i class="checkbox-x"></i>
    <input type="checkbox" name="cb3" id="cb3" class="checkbox-selector" />
    <label for="cb3" >Checkbox 3</label>
  </li>
</ul>
$checkbox-size:50px;
$checkbox-padding:4px;
$label-padding:15px;

.checkbox-group {
	list-style:none;

	li {
		position:relative;
		padding:30px 0;
	}

	input[type="checkbox"] {
		display:none;
		position:absolute;
	}

	i {
		border:4px solid black;	
		width: $checkbox-size - $checkbox-padding * 2 !important;
		height: $checkbox-size - $checkbox-padding * 2 !important;
		position:absolute;
		left:0;
		top:50%;
		transform:translateY(-50%);
	}

	label {
		padding-left: $checkbox-size + 15px;
		padding-top: $label-padding;
		padding-bottom: $label-padding;
		height:$checkbox-size - $label-padding * 2;
		display:inline;
		position:relative;
		z-index:100;
		&:hover {
			cursor:pointer;
		}
	}
}
View Compiled
SnapStates({
	selector: ".checkbox-x",
	svg:'<svg width="100%" height="100%" viewBox="0 0 65 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path class="line_1" d="M7.5,7.5L57.5,57.5" style="fill:none;stroke:#000;stroke-width:8.33px;stroke-dashoffset:1000; stroke-dasharray:1000, 1000;"/><path class="line_2" d="M57.5,7.5L7.5,57.5" style="fill:none;stroke:#000;stroke-width:8.33px;stroke-dashoffset:1000; stroke-dasharray:1000, 1000;"/></svg>',
	transitionTime:400,
	easing:"linear",
	states: {
		draw: [
			{ id: "draw1", element: ".line_1", drawPath:100 },
			{ id: ["draw2", 200], element: ".line_2", drawPath:100 }
		],
		hide: [
			{ id:"hide1", element: ".line_1", drawPath:0, transitionTime:0 },
			{ id:"hide2", element: ".line_2", drawPath:0, transitionTime:0 }
		]
	},
	events: [
		{ event:'change', state: ["draw", "hide"], selector: '.checkbox-selector' }
	]
});
Rerun