<div class="container"> <div class="wrap"> <label for="cross"> <input type="checkbox" name="check" id="cross"> <div class="x"></div> <div class="y"></div> </label> </div> </div>
.wrap { width: 200px; height: 200px; border-radius: 50%; background: #407d94; position: relative; } label { display: block; width: 100%; height: 100%; border-radius: 50%; } .x { position: absolute; width: 20px; height: 20px; top: 30px; left: 50%; margin-left: -10px; border-radius: 2px; background: #eee; transition: all 0.5s ease; } .y { position: absolute; width: 20px; height: 100px; top: 70px; left: 50%; margin-left: -10px; border-radius: 2px; background: #eee; transition: all 0.5s ease; } #cross { display: none; } #cross:checked~div.x { height: 120px; top: 50%; margin-top: -60px; transform: rotate(45deg); } #cross:checked~div.y { height: 120px; top: 50%; margin-top: -60px; transform: rotate(-45deg); }