<label class="tgl"><input checked="checked" type="checkbox" />
  <span class="tgl_body">
    <span class="tgl_switch"></span>
    <span class="tgl_track">
      <span class="tgl_bgd"></span>
      <span class="tgl_bgd tgl_bgd-negative"></span>
    </span>
  </span>
</label>

.tgl {
  position: relative;
  display: inline-block;
  height: 18px;
  cursor: pointer;
}
.tgl > input {
  position: absolute;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
}
.tgl .tgl_body {
  width: 40px;
  height: 18px;
  background: white;
  border: 1px solid #dadde1;
  display: inline-block;
  position: relative;
  border-radius: 9px;
}
.tgl .tgl_switch {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: white;
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 50%;
  border: 1px solid #ccd0d6;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
  -moz-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, -moz-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -o-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, -o-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -webkit-transition: left cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1);
  -webkit-transition-delay: 250ms, 250ms;
  transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  z-index: 1;
}
.tgl .tgl_track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 8px;
}
.tgl .tgl_bgd {
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 43px;
  -moz-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, right cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -o-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, right cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -webkit-transition: left cubic-bezier(0.34, 1.61, 0.7, 1), right cubic-bezier(0.34, 1.61, 0.7, 1);
  -webkit-transition-delay: 250ms, 250ms;
  transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, right cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  background: #43d856 url("data/uploads/checkbox/tgl_check.png") center center no-repeat;
}
.tgl .tgl_bgd-negative {
  right: auto;
  left: -45px;
  background: #ef5113 url("data/uploads/checkbox/tgl_x.png") center center no-repeat;
}
.tgl:hover .tgl_switch {
  border-color: #b5bbc3;
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}
.tgl:active .tgl_switch {
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}
.tgl > :not(:checked) ~ .tgl_body > .tgl_switch {
  left: 22px;
}
.tgl > :not(:checked) ~ .tgl_body .tgl_bgd {
  right: -45px;
}
.tgl > :not(:checked) ~ .tgl_body .tgl_bgd.tgl_bgd-negative {
  right: auto;
  left: -10px;
}
.tgl_text {
	position:relative;
	top: -3px;
	font-family: Vardana, Arial, sans-serif;
}

<label class="cb1">
  <input class="icb" type="checkbox" />
  <span class="scb1">Auto</span>
<label>
<label class="cb1">
  <input checked="checked" class="icb" type="checkbox" />
  <span class="scb1">Motorrad</span>
<label>

.cb1 {
  display: block;
  font-size: 5em;
  cursor: pointer;
  width: 5em;
}
.icb {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.scb1 {
  display: block;
  background-color: #202020;
  background: linear-gradient(0deg, #202020 0%, #505050 50%, #909090 50%, #777777 100%);
  border: 3px solid #000000;
  border-radius: 14px;
  box-shadow: 3px 3px 3px #ababab, 3px 3px 3px #989292 inset;
  text-align: center;
  color: #999;
  margin: 5px;
  padding: 3px;
  transition: background-color .5s, color .5s;
}
.cb1 input:checked ~ .scb1 {
  color: #16e413;
  text-shadow: 0 0 3px #16e413;
}