Why are my div elements not growing properly?

Question

I tried to put the elements of social networks together and when I hover the mouse over each element it grows to a size of 200 pixels. I wrote all the code, but when the mouse is placed on the element, the element does not grow properly and looks like an ellipse. Is there anyone who can help me with this?

<style>
:root {
  --color-orange: #ff6600;
  --color-green: #22d122;
  --color-cyan: #33ffff;
  --color-magenta: #f33192;
  --color-white: #ffffff;
  --color-blue: #166fd4;
  --color-magenta-dark:#831a4e;
  --color-gray:#d6d6d6;
  --color-red:#ff0000;
  --color-graydark:#333;
  --color-blue-dark:#103d68;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, auto);
  place-content: center;
  width: 100%;
  height: 100vh;
  background-color: var(--color-gray);
}
.button {
  display: inline-block;
  background-color: var(--color-white);
  width: 60px;
  height: 60px;
  overflow: hidden;
  box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
.button:hover {
  width: 200px;
}
.button .icon {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.button:hover .icon i {
  color: var(--color-white);
}
.button:nth-child(1):hover .icon {
  background-color: var(--color-blue-dark);
}
.button:nth-child(2):hover .icon {
  background-color: var(--color-blue);
}
.button:nth-child(3):hover .icon {
  background-color: var(--color-magenta);
}
.button:nth-child(4):hover .icon {
  background-color: var(--color-red);
}
.button span {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}
.button:nth-child(1) span {
  color: var(--color-blue-dark);
}
.button:nth-child(2) span {
  color: var(--color-blue);
}
.button:nth-child(3) span {
  color: var(--color-magenta);
}
.button:nth-child(4) span {
  color: var(--color-red);
}
</style>
<div class="wrapper">
    <div class="button">
        <div class="icon">
            <i class="fab fa-facebook-f"></i>
        </div>
        <span>Facebook</span>
    </div>
    <div class="button">
        <div class="icon">
            <i class="fab fa-twitter"></i>
        </div>
        <span>Twitter</span>
    </div>
    <div class="button">
        <div class="icon">
            <i class="fab fa-instagram"></i>
        </div>
        <span>Instagram</span>
    </div>
    <div class="button">
        <div class="icon">
            <i class="fab fa-youtube"></i>
        </div>
        <span>Youtube</span>
    </div>
</div>

Answer 1

Change the value of your border-radius on .button:hover

:root {
  --color-orange: #ff6600;
  --color-green: #22d122;
  --color-cyan: #33ffff;
  --color-magenta: #f33192;
  --color-white: #ffffff;
  --color-blue: #166fd4;
  --color-magenta-dark: #831a4e;
  --color-gray: #d6d6d6;
  --color-red: #ff0000;
  --color-graydark: #333;
  --color-blue-dark: #103d68;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, auto);
  place-content: center;
  width: 100%;
  height: 100vh;
  background-color: var(--color-gray);
}

.button {
  display: inline-block;
  background-color: var(--color-white);
  width: 60px;
  height: 60px;
  overflow: hidden;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-out;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.button:hover {
  width: 200px;
  border-radius: 50px;
}

.button .icon {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}

.button:hover .icon i {
  color: var(--color-white);
}

.button:nth-child(1):hover .icon {
  background-color: var(--color-blue-dark);
}

.button:nth-child(2):hover .icon {
  background-color: var(--color-blue);
}

.button:nth-child(3):hover .icon {
  background-color: var(--color-magenta);
}

.button:nth-child(4):hover .icon {
  background-color: var(--color-red);
}

.button span {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}

.button:nth-child(1) span {
  color: var(--color-blue-dark);
}

.button:nth-child(2) span {
  color: var(--color-blue);
}

.button:nth-child(3) span {
  color: var(--color-magenta);
}

.button:nth-child(4) span {
  color: var(--color-red);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<div class="wrapper">
  <div class="button">
    <div class="icon">
      <i class="fab fa-facebook-f"></i>
    </div>
    <span>Facebook</span>
  </div>
  <div class="button">
    <div class="icon">
      <i class="fab fa-twitter"></i>
    </div>
    <span>Twitter</span>
  </div>
  <div class="button">
    <div class="icon">
      <i class="fab fa-instagram"></i>
    </div>
    <span>Instagram</span>
  </div>
  <div class="button">
    <div class="icon">
      <i class="fab fa-youtube"></i>
    </div>
    <span>Youtube</span>
  </div>
</div>