Stretch Button ignoring margin-CodePudding

I created 3 buttons which stretch a little once you hover over them. I do not want them to move their position while one of the other buttons next to them is stretching out.

This code here works:

.stretch-button {
  background-color: green;
  color: white;
  border: none;
  padding: 8px 15px 8px 15px;
  margin-left: 10px;
  margin-right: 10px;
  transition: padding 0.5s, margin 0.5s;
}

.stretch-button:hover {
  padding: 8px 25px 8px 25px;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
}

<button >
        One
    </button>

<button >
        Two
    </button>

<button >
        Three
    </button>

HOWEVER, under .stretch-button:hover, as soon as you change the left and right padding from 25px to - for example - 24px (or basically ANYTHING under 25px), the code doesn't work anymore and the buttons move while one is being stretched.

Why is that so? I set the margin to 0 in the hover section and I am confused.

Hope someone can explain the reasoning to me!

CodePudding user response：

You've setup your styles to balance margin and padding. Looking at just these properities might make it easier to see what's happening:

    .stretch-button {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .stretch-button:hover {
        padding-left: 25px;
        padding-right: 25px;
        margin-left: 0px;
        margin-right: 0px;
    }

Currently, the totals amount to 25px on each side. So when you hover, the total space doesn't change and thus the button content remains stable.

If you, say, adjust the hover to 20px without also making up the difference in the button, then the total are out-of-balance, and thus the button content shifts.

Here's a working example

<style>
    .stretch-button {
        background-color: green;
        color: white;
        border: none;
        padding: 8px 10px 8px 10px;
        margin-left: 10px;
        margin-right: 10px;
        transition: padding 0.5s,
            margin 0.5s;

    }

    .stretch-button:hover {
        padding: 8px 20px 8px 20px;
        cursor: pointer;
        margin-left: 0px;
        margin-right: 0px;
    }
</style>

<button >
    One
</button>

<button >
    Two
</button>

<button >
    Three
</button>

CodePudding user response：

Maybe the best way to do that is with other structure in the html code. I did another approach.

Now you just have to define the width of the button, the sum of all the widths must not be greater than that of the container. You also have to make sure that the width of the button container is not greater than the width of when hovered.

.container{
    display: flex;
    flex-direction: row;
    width: 600px;
    background-color: red;
    justify-content: space-between;
  }
  
  .button-region {
    width: 200px;
    text-align: center;
  }

  .button {
    background-color: green;
    color: white;
    border: none;
    width: 100px;
    height: 40px;
    transition: width 0.5s;
    padding: 0;
  }
  
  
  .button:hover {
    width: 200px;
    cursor: pointer;
  }

<div class='container'>
  <div class='button-region'>
    <button class='button'> button 1</button>
  </div>
  <div class='button-region'>
    <button class='button'> button 1</button>
  </div>
  <div class='button-region'>
    <button class='button'> button 1</button>
  </div>
</div>

CodePudding user response：

In the stretch-button class you have padding-left plus margin-left adding up to 25px in both states, with and without hover.

i.e. 15px 10px or 25px 0px

When padding-left and margin-left do not add up to the same amount with and without hover, then you will have the effect you are observing.

The same applies to padding-right and margin-right.

I have created some more divs with different settings (and colors) to demonstrate this effect. The green buttons are your original buttons. Please observe the blue buttons. Here the buttons end up exactly the same size and in the same position as the green buttons. However, the transition times are different. Because of this, it is clearly visible that the position and size of the buttons change. Because you used the same transition time for the two effects, no movement of the button text was visible with the green buttons.

However, a study of the orange and black buttons shows the effect when the paddings are more or less than 25px, in this case 20px and 30px.

To answer your question why the other buttons move when one is being stretched, you should first notice what happens when you hover over the orange or black one button. In this situation, the two, three, and 4 buttons both move (orange to the left, black to the right). However, when you hover over the orange or black two button, only the three and 4 button moves (again, orange to the left, black to the right). And notice the button you hover over will increase in size (which is what you want and expect).

div {
  margin-bottom: 3px;
}

.stretch-button {
  background-color: green;
  color: white;
  border: none;
  padding: 8px 15px 8px 15px;
  margin-left: 10px;
  margin-right: 10px;
  transition: padding 0.5s, margin 0.5s;
}

.twenty {
  background-color: orange;
}

.thirty {
  background-color: black;
}

.stretch-button:hover {
  padding: 8px 25px 8px 25px;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
}

.twenty:hover {
  padding: 8px 20px 8px 20px;
}

.thirty:hover {
  padding: 8px 30px 8px 30px;
}

.no-stretch-button {
  background-color: red;
  color: white;
  border: none;
  padding: 8px 15px 8px 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.diff-times {
  background-color: blue;
  transition: padding 0.5s, margin 2.5s;
}

<div>
  <button >
    One
  </button>
  <button >
    Two
  </button>
  <button >
    Three
  </button> Your original buttons
</div>
<div>
  <button >
    One
  </button>
  <button >
    Two
  </button>
  <button >
    Three
  </button> transition times are different
</div>
<div>
  <button >
    One
  </button>
  <button >
    Two
  </button>
  <button >
    Three
  </button> Nothing happens to show position of original buttons
</div>
<div>
  <button >
    One
  </button>
  <button >
    Two
  </button>
  <button >
    Three
  </button>
  <button >
    4
  </button> padding-left   margin-left = 20px, not 25px
</div>
<div>
  <button >
    One
  </button>
  <button >
    Two
  </button>
  <button >
    Three
  </button>
  <button >
    4
  </button> padding-left   margin-left = 30px, not 25px
</div>