CSS тумблер группы из нескольких кнопок

Question

Мне бы хотелось что-то вроде JQuery Mobile Flip Toggle Switch, но только это, то я не хочу загружать всю библиотеку JQuery Mobile в свой проект.

Знаете ли вы, как сделать симпатичные кнопки переключения CSS (более двух кнопок), подобных этим? Я ничего не нашел.

Заранее спасибо!

PS: Мне не нужна совместимость с IE.

Answer 1

Сделано что-то быстро. Надеюсь, это поможет вам.

ul.tab { 
 
    list-style-type:none; 
 
    margin: 0; 
 
    padding:0; 
 
    border-radius: 5px; 
 
} 
 
ul.tab li { 
 
    float: left; 
 
    padding: 0; 
 
} 
 
ul.tab li label { 
 
    background: white; 
 
    padding: 6px; 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
} 
 
ul.tab li input[type="radio"] { 
 
    opacity: 0; 
 
    width:1px; 
 
    height:1px; 
 
} 
 
ul.tab li input[type="radio"]:checked ~ label { 
 
    background: red; 
 
    color: white; 
 
}

<ul class="tab"> 
 
    <li> 
 
     <input id="tab1" checked="checked" type="radio" name="tab" /> 
 
     <label for="tab1">Basic</label> 
 
    </li> 
 
    <li> 
 
     <input id="tab2" type="radio" name="tab" /> 
 
     <label for="tab2">Options</label> 
 
    </li> 
 
    <li> 
 
     <input id="tab3" type="radio" name="tab" /> 
 
     <label for="tab3">Methods</label> 
 
    </li> 
 
    <li> 
 
     <input id="tab4" type="radio" name="tab" /> 
 
     <label for="tab4">Events</label> 
 
    </li> 
 
</ul>