Why are my div elements not growing properly? - html

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>

Answer 2

You also need to change height on hover.
.button:hover {
width: 200px;
height: 200px;
border-radius: 50px;
}
But I recommend you to use transform: scale(2) if you aiming for performance.

Answer 3

when you hover the button its height increases and the width
.button:hover{
transform:scale(1.015deg)
}