CSS 3 Semafor

HTML

<input type="checkbox" id="a" />
<input type="checkbox" id="b" />
<input type="checkbox" id="c" />

<label for="a"></label>
<label for="b"></label>
<label for="c"></label>

CSS

label {
    width: 100px;
    height: 100px;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}

input { 
    display: none;
}

#a:checked ~ [for=a] { background-color: pink; }
#b:checked ~ [for=b] { background-color: brown; }
#c:checked ~ [for=c] { background-color: purple; }