チェックボックスをボタン風にする

HTML

<div class="radiobox">
    <!-- ラジオボタン -->
    <input type="radio" name="radio-hoge" id="hoge" class="radiobutton" />
    <label for="hoge" class="btn">ほげ</label>
    <input type="radio" name="radio-hoge" id="fuga" class="radiobutton" />
    <label for="fuga" class="btn">ふが</label>
    <input type="radio" name="radio-hoge" id="piyo" class="radiobutton" />
    <label for="piyo" class="btn">ぴよ</label>
 
    <!-- チェックボックス -->
    <input type="checkbox" id="hogehoge" class="radiobutton" />
    <label for="hogehoge" class="btn">ほげほげ</label>
    <input type="checkbox" id="fugafuga" class="radiobutton" />
    <label for="fugafuga" class="btn">ふがふが</label>
    <input type="checkbox" id="piyopiyo" class="radiobutton" />
    <label for="piyopiyo" class="btn">ぴよぴよ</label>
</div>

CSS

.radiobutton {
    display: none;
}
 
.btn {
    display: inline-block;
    margin: 3px 0;
    padding: 3px 10px;
    border: 1px solid #000;
    background: #eee;
    text-align: center;
    color: #333;
    text-decoration: none;
}
 
.btn:hover {
    background: #ffffff;
}
 
.radiobox:checked + .btn {
    border: 1px solid #ff0000;
    background: #ffffff;
    color: #ff0000;
    font-weight: bold;
}