Why are my div elements not growing properly?-CodePudding

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 >
    <div >
        <div >
            <i ></i>
        </div>
        <span>Facebook</span>
    </div>
    <div >
        <div >
            <i ></i>
        </div>
        <span>Twitter</span>
    </div>
    <div >
        <div >
            <i ></i>
        </div>
        <span>Instagram</span>
    </div>
    <div >
        <div >
            <i ></i>
        </div>
        <span>Youtube</span>
    </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <i ></i>
    </div>
    <span>Facebook</span>
  </div>
  <div >
    <div >
      <i ></i>
    </div>
    <span>Twitter</span>
  </div>
  <div >
    <div >
      <i ></i>
    </div>
    <span>Instagram</span>
  </div>
  <div >
    <div >
      <i ></i>
    </div>
    <span>Youtube</span>
  </div>
</div>

CodePudding user response：

It's an ellipse as width and height are not equal

You have the width on hover to 200px while the height remains 60 px, in order to obtain a circle, you need to have the same width and height like

.button:hover {
  width: 200px;
  height: 200px
}

CodePudding user response：

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.

CodePudding user response：

when you hover the button its height increases and the width

.button:hover{
transform:scale(1.015deg)
}