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);
}
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.
Solution 2 :
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);
}
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);
}
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?
Comments
Comment posted by tacoshy
it is not done by translating but by increasing the
Comment posted by Ronnie Royston
use flexbox to position your container and buttons, not absolute positioning.
Comment posted by noahG3
@tacoshy Thank you, just tried this and it worked. Why is this though? Why won’t translating (at least for button-2) work?
Comment posted by DeusDev
Changing
Comment posted by noahG3
@DeusDev Interesting. I’ve read that
Comment posted by noahG3
Thanks for your answer! For the line ` transform: translate(-50px, 5px);` in your code, is there a reason you use -50px instead of -50%? They both seem to work the same, just wondering if there’s any advantages/disadvantages to either.
Comment posted by A Haworth
Apologies, it should be -50%. Thanks for spotting it. Only worked with the px value because the width was 100px.
Comment posted by A Haworth
The X and Y axes are not getting mixed up. But the X translation is getting lot when the Y translation is introduced.
