What's the best way to create non-symmetrical buttons with scaling animations on hover for my portfolio website?

So I'm trying to make this website and use it as my portfolio, since I'm starting to get a job.

I'm having some issues with creating the website, more so with the animation that I want to create.

Pretty much what I want to do is this animation on this website: https://www.milli.agency

What I want are buttons that are not symmetrical and when I hover my mouse over them, they get bigger and push the other buttons to the side, without them overlapping with themselves

I got kinda far, but now I having some issues in mimicking this affect.

Here's the code I got so far:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portifólio João Pedro</title>
        
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="button">
              <button>Botão 1</button>
            </div>
            <div class="button">
              <button>Botão 2</button>
            </div>
            <div class="button">
              <button>Botão 3</button>
            </div>
            <div class="button">
              <button>Botão 4</button>
            </div>
          </div>
    </body>
</html>

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
  
.container {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
}
  
.button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    transition: transform 0.3s ease-in-out, z-index 0.3s;
}
  
.button button {
    width: 100%;
    height: 100%;
}
  
.container:hover .button:not(:hover) {
    transition-delay: 0s !important;
    transform: translateX(0);
    z-index: 0;
}
  
.container:hover .button:hover {
    transform: scale(1.1);
    z-index: 1;
}
  
.container:hover .button:hover ~ .button {
    transition-delay: 0.1s;
    transform: translateX(15%);
}

What an I missing, I just starting it out, but tried to look at youtube, websites but haven't found much on the subject.

How can I make this same effect, is it better with JavaScript, continue with CSS, I at a loss right now, can you guys help me?

I tried looking at articles online, youtube, but that's about it.

What I'm looking for is an effect similar to the one I gave an exemple of: https://www.milli.agency

Solution

Everything is fine but you are assuming that this page is only built with HTML & CSS but you can see that they are using two J-query libraries to build this structure. Here is one simple example structure I wrote for you.

<!DOCTYPE html>
<html data-wf-page="60ee32414a2efc10344a2943"><head>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio João Pedro</title>
<!--Must Use this Jquery file in <head> Tag-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
* {
  box-sizing: border-box;
}

.home_topleft {
  z-index: 1;
  width: 60%;
  height: 40%;
  background-color: #fff;
  border: 2px solid #000;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
}

.home_topright {
  z-index: 1;
  width: 40%;
  height: 60%;
  background-color: #fff;
  border: 2px solid #000;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
}

.home_bottomleft {
  z-index: 1;
  width: 40%;
  height: 60%;
  background-color: #fff;
  border: 2px solid #000;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
}

.home_bottomright {
  z-index: 1;
  width: 60%;
  height: 40%;
  background-color: #fff;
  border: 2px solid #000;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}

.button {
  color: #141414;
  text-transform: uppercase;
  font-family: forma-djr-micro, sans-serif;
  font-size: 50px;
  font-weight: 400;
  text-decoration: none;
}
</style>

</head>
<body>
<div class="container">

<div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
<button class="button">Botão 1</button>
</div><div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
<button class="button">Botão 2</button>
  </div><div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
<button class="button">Botão 3</button>
  </div><div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
<button class="button">Botão 4</button></div>
</div>

<!-- Use this Jquery file just before close the </body> tag-->
<script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
</body></html>