.TinyTools.ToggleSwitch { display: inline-block; font-size: 11px; font-weight: bold; border: 1px solid #888; border-radius: 3px; overflow: hidden; color: #eee; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .TinyTools.ToggleSwitch .NubWrapper { height: 100%; width: 100%; position: absolute; left: 0; top: 0; -moz-transition: opacity 1s; -o-transition: opacity 1s; -webkit-transition: opacity 1s; transition: opacity 1s; } .TinyTools.ToggleSwitch .NubWrapper.Disabled { opacity: .5; } .TinyTools.ToggleSwitch .NubWrapper > * { -moz-transition: left .5s ease-in-out, right .5s ease-in-out; -o-transition: left .5s ease-in-out, right .5s ease-in-out; -webkit-transition: left .5s ease-in-out, right .5s ease-in-out; transition: left .5s ease-in-out, right .5s ease-in-out; } .TinyTools.ToggleSwitch .NubWrapper .OnSide, .TinyTools.ToggleSwitch .NubWrapper .OffSide, .TinyTools.ToggleSwitch .NubWrapper .Nub { display: table; vertical-align: middle; width: 50%; height: 100%; text-align: center; position: absolute; top: 0; } .TinyTools.ToggleSwitch .NubWrapper .OnSide { right: -50%; background: #3BC492; background: -moz-linear-gradient(top, #3BC492 0%, #22AB79 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3BC492), color-stop(100%,#22AB79)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3BC492 0%,#22AB79 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3BC492 0%,#22AB79 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3BC492 0%,#22AB79 100%); /* IE10+ */ background: linear-gradient(to bottom, #3BC492 0%,#22AB79 100%); /* W3C */ } .TinyTools.ToggleSwitch .NubWrapper .OffSide { left: 0; background: #666; background: -moz-linear-gradient(top, #666 0%, #999 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#999)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #666 0%,#999 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #666 0%,#999 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #666 0%,#999 100%); /* IE10+ */ background: linear-gradient(to bottom, #666 0%,#999 100%); /* W3C */ } .TinyTools.ToggleSwitch .NubWrapper .OnSide span, .TinyTools.ToggleSwitch .NubWrapper .OffSide span { display: table-cell; vertical-align: middle; } .TinyTools.ToggleSwitch .NubWrapper .Nub { left: 50%; background: #eee; background: -moz-linear-gradient(top, #fff 0%, #eee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#eee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fff 0%,#eee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fff 0%,#eee 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fff 0%,#eee 100%); /* IE10+ */ background: linear-gradient(to bottom, #fff 0%,#eee 100%); /* W3C */ } .TinyTools.ToggleSwitch .NubWrapper.Checked .OnSide { right: 0; } .TinyTools.ToggleSwitch .NubWrapper.Checked .OffSide { left: -50%; } .TinyTools.ToggleSwitch .NubWrapper.Checked .Nub { left: 0; }