Why isn't my button translating correctly in my div?-CodePudding

I'm new to HTML/CSS and attempting to replicate this button effect in a project of mine where the buttons are children of a div. However, whenever I do the translateY, my buttons move to the side instead. Here is the HTML and CSS; button-2 is the problematic one:

.container {
  position: relative width: 600px;
  height: 600px;
}

#button-1 {
  position: absolute;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: ridge;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  top: 50%;
  left: 25%;
}

#button-1:hover {
  background-color: #3e8e41
}

#button-1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(10px);
}

#button-2 {
  position: absolute;
  width: 100px;
  padding: 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: darkslategray;
  background-color: antiquewhite;
  box-shadow: 0px 9px gray;
  cursor: pointer;
  top: 62%;
  left: 50%;
  /* if i remove this line, translation works as expected
           but then the button is no longer centered horizontally
           consequently, keeping the line breaks the affect
           but the button can be centered horizontally
        */
  transform: translate(-50%, 0);
}

#button-2:hover {
  background-color: cornsilk;
}

#button-2:active {
  background-color: cornsilk;
  box-shadow: 0px 3px gray;
  transform: translateY(5px);
}

<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
  <button id="button-1">Btn1</button>
  <button id="button-2">Btn2</button>
</div>

The problem seems to stem from transform: translate(-50%, 0);, which is what I have to do to center button-2 horizontally in the container div. I can remove that line and the effect works, but then button-2 is no longer centered horizontally. Why is it that transform: translate(-50%, 0); seemingly causes the subsequent transform: translateY(5px); not to work for button-2? Is there anyway I can horizontally (but not vertically) center button-2 while also being able to achieve the desired effect?

CodePudding user response：

The problem is that when you set the translate property on the second button becoming active, you overwrite the original transform which is moving the button by half its width in the negative X direction.

It is important to keep this translation as well as the new one so make the translation in the active state set both the X and Y values that you want.

.container {
  position: relative width: 600px;
  height: 600px;
}

#button-1 {
  position: absolute;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: ridge;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  top: 50%;
  left: 25%;
}

#button-1:hover {
  background-color: #3e8e41
}

#button-1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(10px);
}

#button-2 {
  position: absolute;
  width: 100px;
  padding: 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: darkslategray;
  background-color: antiquewhite;
  box-shadow: 0px 9px gray;
  cursor: pointer;
  top: 62%;
  left: 50%;
  /* if i remove this line, translation works as expected
           but then the button is no longer centered horizontally
           consequently, keeping the line breaks the affect
           but the button can be centered horizontally
        */
  transform: translate(-50%, 0);
}

#button-2:hover {
  background-color: cornsilk;
}

#button-2:active {
  background-color: cornsilk;
  box-shadow: 0px 3px gray;
  transform: translate(-50px, 5px);
}

<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
  <button id="button-1">Btn1</button>
  <button id="button-2">Btn2</button>
</div>

Note: as others have suggested you may like to look into using flex (or grid) to position your buttons rather than having to mess around with positioning using absolute and translations. The translate for Y could then remain as in the original and you wouldn't be translating in the X direction at all.

CodePudding user response：

you have gotten your X and Y axis mixed up.

you translated via translate(-50%, 0) which moves it by an X of -50% and a Y of nothing, you can fix this by changing it to translate(0, -50%) which will move it down a Y of -50%, and an X of 0.

test the snippet:

.container {
  position: relative width: 600px;
  height: 600px;
}

#button-1 {
  position: absolute;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: ridge;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  top: 50%;
  left: 25%;
}

#button-1:hover {
  background-color: #3e8e41
}

#button-1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(10px);
}

#button-2 {
  position: absolute;
  width: 100px;
  padding: 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: darkslategray;
  background-color: antiquewhite;
  box-shadow: 0px 9px gray;
  cursor: pointer;
  top: 62%;
  left: 50%;
  /* if i remove this line, translation works as expected
           but then the button is no longer centered horizontally
           consequently, keeping the line breaks the affect
           but the button can be centered horizontally
        */
  transform: translate(0, -50%);
}

#button-2:hover {
  background-color: cornsilk;
}

#button-2:active {
  background-color: cornsilk;
  box-shadow: 0px 3px gray;
  transform: translateY(5px);
}

<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
  <button id="button-1">Btn1</button>
  <button id="button-2">Btn2</button>
</div>