html switch效果,Html, CSS Switch button

I found a very nice CSS buttons creator http://proto.io/freebies/onoff/.

I created a switch button I know I need to execute two JS codes. Different for switch on and different for switch off. Lets say alert("on") when on and alert("off) when off.

Can you please help me with that? Here is the html and css code

.onoffswitch {

position: relative;

width: 82px;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select: none;

}

.onoffswitch-checkbox {

display: none;

}

.onoffswitch-label {

display: block; overflow: hidden; cursor: pointer;

border: 2px solid #FFFFFF; border-radius: 5px;

}

.onoffswitch-inner {

width: 200%;

margin-left: -100%;

-moz-transition: margin 0.3s ease-in 0s;

-webkit-transition: margin 0.3s ease-in 0s;

-o-transition: margin 0.3s ease-in 0s;

transition: margin 0.3s ease-in 0s;

}

.onoffswitch-inner:before, .onoffswitch-inner:after {

float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;

font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

}

.onoffswitch-inner:before {

content: "on";

padding-left: 14px;

background-color: #2FFF3D;

color: #FFFFFF;

}

.onoffswitch-inner:after {

content: "off";

padding-right: 14px;

background-color: #ADADAD;

color: #FFFFFF;

text-align: right;

}

.onoffswitch-switch {

width: 28px; margin: 0px;

background: #FFFFFF;

border: 2px solid #FFFFFF; border-radius: 5px;

position: absolute; top: 0; bottom: 0; right: 50px;

-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;

-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;

background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

margin-left: 0;

}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {

right: 0px;

}