<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.