Opening a half page when clicking a button
<p>I am trying to open a kind of a new page when clicking on a button. For example, I have some items that vertically and horizontally center in the page. I want it so that when the button is clicked, it will move all my items to the left half of the page and open a new page on the right half page. 
This is my example code:
<strong>HTML:</strong></p>

<pre><code>&lt;div&gt;text&lt;/div&gt;
&lt;div&gt;text&lt;/div&gt;
&lt;div&gt;text&lt;/div&gt;
&lt;button&gt;
Click me
&lt;/button&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
</code></pre>

<p>And this is my goal when someone clicks on the button:
<a href="https://i.stack.imgur.com/91pVU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/91pVU.png" alt="enter image description here"></a></p>

<p>Any suggestions?</p>