How to create an interactive event that changes the position attributes in the CSS file of an external div using only html and CSS?

Question

I have a div container. inside, I have a button. I want the button to be used to change the attributes of a DIV position. I want the button to click to move the entire container to the left. I have to do this without any scripts; CSS and HTML only. Is it possible? perhaps with a button button: active {stuff}?

Answer 1

You can use checkbox hack

#move-div {
  display: none;
}
#move-div:checked + .movable {
  left: -50px;
}
.movable {
  position: relative;
  background-color: #FF0000;
  padding: 10px;
}
.button {
  display: inline-block;
  padding: 5px;
  background-color: #FFF;
  border-radius: 5px;
  color: #000;
  box-shadow: 3px 3px 5px 3px #AAA;
}

<input id="move-div" type="checkbox">
<div class="movable">
  <label class="button" for="move-div">Move the div</label>
</div>

Run code