Toggle approve button, compatible with IE9, not working in IE7 or below
.toggle {
width: 200px;
position: relative;
display: block;
border: 0;
margin: 0;
padding: 0;
}
.toggle label {
position: relative;
z-index: 3;
display: block;
width: 100%;
padding: 3px 0;
cursor: pointer;
}
.toggle input {
position: absolute;
opacity: 0;
z-index: 5;
}
.toggle input:focus ~ .toggle-button {
outline: 1px dotted #fff;
}
.toggle label:after {
position: absolute;
top: 0;
right: 20px;
z-index: 0;
display: block;
width: 80px;
height: 17px;
background-color: #dd7e6d;
border: 1px solid #b15b4d;
border-radius: 2px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.17), 0 1px 0 rgba(255,255,255,0.9);
content: "No a Yes";
white-space: pre;
color: #8f5247;
font-weight: 700;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
padding: 2px 0;
}
.toggle span {
display: block;
position: absolute;
right: 20px;
top: -2px;
z-index: 4;
width: 40px;
height: 25px;
border: 1px solid #bbb;
background-color: #f7f7f7;
background-image: linear-gradient(top, #f7f7f7, #ececec);
box-shadow: inset 0 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.12);
border-radius: 2px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.toggle input:checked ~ span {
right: 60px;
}
.toggle input:checked + label:after {
background-color: #a0c66b;
color: #60783f;
border-color: #87aa5b;
}