<div class="parent">
<input type="checkbox" class="switch" id="switch" />
<div class="child block_one">
<div class="button">
<label for="switch">Bedi Manos</label>
</div>
</div>
<div class="child block_two"></div>
</div>
.parent {
}
.child {
width: 250px;
height: 320px;
}
.block_one {
background-color: #ff5c37;
}
.block_two {
background-color: #fff4f0;
}
.button {
text-align: center;
}
.button label {
display: inline;
padding: 1em 2em;
background-color: white;
cursor: pointer;
}
.switch {display: none;}
.switch:checked ~ .block_one {display: none;}
.switch:checked ~ .block_two {display: block;}
.switch ~ .block_one {display: block;}
.switch ~ .block_two {display: none;}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.