fbpx

CSS3 On / Off switch

css3-toggle-awitch

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

.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

 

Also, you can check out another CSS tutorial for animating a login form.

 

Share this info with your audience:

2 thoughts on “CSS3 On / Off switch

  1. My brother recommended I would possibly
    like this website. He was once entirely right.
    This put up actually made my day. You can not imagine just how so much time
    I had spent for this info! Thank you!

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.