Tag: On Off

CSS3 On / Off switch

Here is a simple CSS3 On / Off switch. You can use JavaScript code to find the current switch state. This example only provides the styling part of the element. This is a lightweight solution for building from scratch a toggle button (switch). It can work on any platform that supports CSS3. The HTML: <div class=”switch” id=”switch”> <a href=”#thinghyL”> <div class=”thinghyL” id=”thinghyL”><div class=”knobL”></div></div> </a> <a href=”#thinghyR”> <div class=”thinghyR” id=”thinghyR”></div> </a> </div> The CSS: .switch { width:100px; height:30px; background-color:#eeeeee; border-radius:15px; border:solid thin #000000; float:left; overflow:hidden; } .thinghyL { height:100%; width:100%; background-color:green; border-radius:15px; transition: width 300ms ease-out; float:left; margin-left:0px; position:relative; z-index:10; } Continue reading