<div class="inputcheck11">
  <label>
  <input type="checkbox" name="check" checked />
  <span class="label-text">ネコ</span>
  </label>
  <label>
  <input type="checkbox" name="check" />
  <span class="label-text">イヌ</span>
  </label>
  <label>
  <input type="checkbox" name="check" disabled />
  <span class="label-text">ウサギ</span>
  </label>
</div>

.inputcheck11 input[type=checkbox] {
  display: none;
}
.inputcheck11 label {
  color: #666;
  cursor: pointer;
}
.inputcheck11 .label-text {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 30px;
}
/*チェックボックスの設定*/
.inputcheck11 .label-text::before {
  position: absolute;
  left: 0;
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid #666;
  border-radius: 3px;
}
.inputcheck11 input[type=checkbox]:checked + .label-text::before {
  position: absolute;
  left: 0;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #06a3e9;
  border: 1px solid #06a3e9;
  animation: click-wave 180ms ease-in;
}
/*checked時のチェックボックスのチェックマーク*/
.inputcheck11 input[type=checkbox]:checked + .label-text::after {
  position: absolute;
  left: 4px;
  content: "✔︎";
  color: #ffffff;
}
/*無効の設定*/
.inputcheck11 input[type=checkbox]:disabled + .label-text {
  color: #aaa;
  cursor: not-allowed;
}
/*クリックした時のアニメーション*/
@keyframes click-wave {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}