Ajax Loader
×

CSS3 Toggle Switch

A classic console-style toggle switch, inspired by Eugene Cheporov's switch as seen in this Dribbble: http://drbl.in/fFvs

The main properties used are layered linear and radial gradients, and rotation of some square divs in order to achieve the notches in the 'nut'. CSS3 transitions are used for the toggle animations, and a click event in jQuery handles the toggling of the classes which trigger the toggling of the switch and of the led lights.

See the CSS around line 300 to assign a different color to the LEDs.

Also I used this to start teaching myself SASS (this uses SCSS syntax). Mixins came quite in handy for the LED lights. The color for the LED is set in one place, and mixins calculate the various shadow and highlight derivations of the color in the various gradients.

Although there are a lot of divs in the switch, I was pleased to manage to do the LEDs using only two divs.

tested in Chrome 22, Chrome on iOS and Firefox 16

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Toggle Switch

    CSSDeck G+