Новый checkbox

[olegumar]

Кто уже предлагал свои варианты checkbox, но не удачно. Хочу попробовать предложить свой вариан который я использую. На мой взгляд он очень хорошо вписывается в ваш дизайн.
Вот код CSS:
/* .slideThree /
.slideThree {
width: 80px;
height: 25px;
background: #A7C6DD;
margin: 20px auto;
position: relative;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideThree:after {
content: 'OFF';
color: #140f0b;
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slideThree:before {
content: 'ON';
color: #317f43;
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slideThree label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slideThree input[type=checkbox] {
visibility: hidden;
}
.slideThree input[type=checkbox]:checked + label {
left: 43px;
}
/ end .slideThree */

[renat2985]

Свяжитесь со мной в Skype: renat2985

[olegumar]

Как стоит у меня на страничке HTML:

<div class="slideThree"><input type="checkbox" id="1pul" onchange="fun1()" ><label for="1pul"></label></div>

[olegumar]

Еще можно попросить сделать пару кнопок в редакторе ?
Номе - переход на начальную страницу
Settings - на страницу с настройками.

[olegumar]

Ренат, не знал где написать. Нашел инфу, где сказано, что писать коды для ESP можно и на JS, Для тебя это наверно самое то.
http://wiki.amperka.ru/js:ide тут описание есть.