How to toggle using css3 - No javascript

How to toggle using css3 - 
No Javascript

Learn how to toggle using css without using javascript.

CSS Toggle

If you want to toggle between two objects in a web page then you are bound to use javascript. CSS eliminates this bounding.See the code below to learn how to do this using CSS.


input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
<label for="toggle-1">Toggle</label>
<input type="checkbox" id="toggle-1">
<div>No javascript</div>