Пример:
HTML:
|
1 2 3 4 5 6 7 8 |
<div class="bg-checkbox-wrap"> <input type="checkbox" id="bg-checkbox" /> <label id="bg-checkbox-button" for="bg-checkbox"> <span id="knob"></span> <span id="not-ok">Не согласен</span> <span id="ok">Согласен</span> </label> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
.bg-checkbox-wrap * { box-sizing: content-box; } .bg-checkbox-wrap { display: flex; justify-content: center; } #bg-checkbox { display: none; } #bg-checkbox-button { position: relative; display: block; width: 225px; height: 94px; background-color: #337AB7; border-radius: 87px; cursor: pointer; transition: 0.4s ease background-color; border: 4px solid #BFE2FF; } #bg-checkbox-button span { display: block; } #bg-checkbox-button #knob { width: 72px; height: 72px; background-image: url('bg-chekbox.jpg'); background-size: 225px; position: relative; top: 7px; left: 7px; border-radius: 50%; transition: 0.4s ease left, 0.4s ease background-position; z-index: 2; border: 4px solid #BFE2FF; } #bg-checkbox-button #not-ok, #bg-checkbox-button #ok { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 13px; font-weight: bold; font-family: Verdana, sans-serif; text-transform: uppercase; margin-left: 102px; z-index: 1; transition: 0.4s ease opacity; } #bg-checkbox-button #ok { margin-left: 30px; opacity: 0; } #bg-checkbox:checked + #bg-checkbox-button #ok { opacity: 1; } #bg-checkbox:checked + #bg-checkbox-button #not-ok { opacity: 0; } #bg-checkbox:checked + #bg-checkbox-button #knob { left: 138px; background-position: -125px 0; } |
Фоновую картинку можно поставить по вкусу или использовать из примера: bg-chekbox.jpg
За основу взято решение, найденное на codepen.io у пользователя Himalaya Singh
А как можно реализовать переход по ссылке в зависимости от выбранной кнопки?))
Не совсем понял...
Если будет переход по ссылке, то посуте не важно куда выбрана кнопка - откроется другая страница.