【HTML5+CSS】Checkboxを美しいボタンにする方法 【js不使用】

#チェックボックスってデザインがあまり良くない！
###現状
項目１

###こんな感じにしたい！

#これで出来る！
##CSSをこうして

label{
  cursor: pointer;
  padding:5px;
  border: 1px solid #434343;
  border-radius: 5px;
}
input{
  display: none;
}
.check_box:checked + .label {
  background-color: orange;
}

CSSざっくり解説
.check_box:checked + .label {}
この部分でチェックボックスがチェックされた時のlabelのデザインを指定している。
##HTMLをこう！

<input type="checkbox" class="check_box" id="hoge1" />
<label class="label" for="hoge1">HOGE！だよ！</label>

注意：ちゃんとinputタグのidとlabelのforをあわせましょう！

２つ以上チェックボックスを作るならこう！

<input type="checkbox" class="check_box" id="hoge1" />
<label class="label" for="hoge1">HOGE！だよ！</label>
<input type="checkbox" class="check_box" id="hoge2" />
<label class="label" for="hoge2">HOGE２だよ！</label>
<input type="checkbox" class="check_box" id="hoge3" />
<label class="label" for="hoge3">HOGE３だよ！</label>

#チェックボックスを綺麗にデザイン
簡単にざっくりと解説しているサイトが無かったので書きました。
誰かの参考になればと思います