Like radio

by hamix

HTML

<input type="radio" name="vote1" class="vote" id="down1" value="down" /><label for="down1"></label>
<input type="radio" name="vote1" class="vote" id="up1" value="up" /><label for="up1"></label>
<hr/>
<input type="radio" name="vote1" class="vote" id="down2" value="down" /><label for="down2"></label>
<input type="radio" name="vote1" class="vote" id="up2" value="up" /><label for="up2"></label>

CSS

.vote { display: none; }

.vote + label {
    display: inline-block;
    width:55px; 
    height:65px;
    background-image: url(http://i.imgur.com/oRg1EVq.png);
}

.vote[value="up"] + label {
    background-position: 55px 66px;
}
.vote[value="up"]:checked + label {
    background-position: 55px 0px;
}

.vote[value="down"] + label {
    background-position: 0px 66px;
}
.vote[value="down"]:checked + label {
    background-position: 0px 0px;
}