• Регистрация
  • Вход
MENU
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Обо всём » Собираем скрипты » Кнопка вкл. выкл.
Кнопка вкл. выкл.
artnovДата: Вторник, 24.06.2014, 20:26 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 149
Награды: 0
Репутация: 0
Статус: Offline
Код
<style>#payt4 {display: none;}
  [for="payt4"]{
   display: inline-block;
   padding: 7px;
   border-radius: 100px;
   background: rgba(0, 0, 0, .1);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4) inset, 0 1px 1px 0 rgba(255, 255, 255, .1);
   text-shadow: 0 1px rgba(0, 0, 0, .5);
   cursor: pointer;
}
[for="payt4"]:before, [for="payt4"]:after {
   display: inline-block;
   padding: 5px 20px;
}
[for="payt4"]:before {
   content: "ВЫКЛ";
   border-radius: 100px 0 0 100px;
   background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
   color: rgba(0,0,0,.4);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4);
}
[for="payt4"]:after {
   content: "ВКЛ";
   border-radius: 0 100px 100px 0;
   background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
   box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
}
#payt4:checked ~ [for="payt4"]:after {
   background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
   box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4);
   color: rgba(0,0,0,.4);
}
#payt4:checked ~ [for="payt4"]:before {
   box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
   background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
   color: inherit;
}
</style>

<input type="checkbox" id="payt4"/><label for="payt4"></label>
Пример
 


 Ссылка на публикацию
 
html-cсылка на публикацию
BB-cсылка на публикацию


Artnov
 
Форум » Обо всём » Собираем скрипты » Кнопка вкл. выкл.
Страница 1 из 11
Поиск: