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.

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;
}

.thinghyL:target
{
width:1px;
}

.thinghyR
{
height:100%;
width:100%;
background-color:red;
border-radius:15px;
transition: margin-left 300ms ease-out;
margin-left:0px;
margin-top:-30px;
float:left;
position:relative;
z-index:0;
}

.knobL
{
width:20px;
height:20px;
background-color:#ffffff;
margin:5px 0px 0px 70px;
border-radius:10px;
transition: margin-left 300ms ease-out;
}

.thinghyL:target .knobL
{
margin-left:10px;
}

 

Try the live DEMO

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *