Checkbox as toggle buttons

by Petr Haluza

HTML

<div class="filtrNadpis">
Typ procesoru
  <div>
    Vybrané:
    <label class="">
      <input type="checkbox">
      <span>
        <span class="f1">Zobrazit</span>
        <span class="f2">Vynechat</span>
      </span>
    </label>
  </div>

</div>

CSS

.filtrNadpis { color: #444;
border-top: 2px solid #f0f0f0;
float: left;
font-size: 14px;
margin: 15px 0 5px;
padding: 5px;
width: 100%;
font-weight: 600;
background:#eee;
font-family: 'Open Sans', sans-serif; box-sizing:border-box;}

.filtrNadpis > div {float:right; font-size:12px; font-weight:300;}
.filtrNadpis label {position:relative; }
.filtrNadpis input {position:absolute; opacity:0;}
.filtrNadpis label > span {border-radius:7px; background:#aaa; padding:2px; display:inline-block;}
.filtrNadpis label span span {cursor:pointer; border-radius:5px; padding:2px 5px; display:inline-block;  transition: background-color 150ms linear;}
.filtrNadpis input:not(:checked)~ span > span.f1 { background-color:white; color:green;}
.filtrNadpis input:checked ~ span > span.f2 { background-color:white; color:red;}