Кнопки увеличиваются не в ту сторону.

#html #css

Здравствуйте!
Столкнулся с такой проблемой, когда кнопки стоят в один ряд, они увеличиваются вниз,
мне нужно чтобы их увеличение происходило вверх, как исправить ошибку?
Разметку прикрепляю ниже:



div.buttonsfooter {
  width: 350px;
  height: 45px;
  background: url(https://i.stack.imgur.com/TnnDv.png);
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
  margin-top: 85px;
  margin-left: 1;
  transition: 0.3s;
  display: inline-block;
  position: relative;
}

div.buttonsfooter:hover {
  background: url(https://i.stack.imgur.com/TnnDv.png);
  margin-top: 65px;
  height: 65px;
  background-size: 100%;
}

a.buttontext {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.000em;
  color: #fff;
  margin-top: 3%;
  margin-left: 28.5%;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

  
Калькулятор металла
  
ГОСТы и ТУ




    

Ответы

Ответ 1

display: inline-block; по-умолчанию имеют vertical-align: baseline; , стоит выровнять
 vertical-align: top; и обе кнопки вверх начинают увеличиваться:



div.buttonsfooter {
  width: 350px;
  height: 45px;
  background: url(https://dummyimage.com/600x400/333/fff);
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
  margin-top: 85px;
  margin-left: 1;
  transition: 0.3s;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

div.buttonsfooter:hover {
  background: url(https://dummyimage.com/600x400/ccc/fff);
  margin-top: 65px;
  height: 65px;
  background-size: 100%;
}

a.buttontext {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.000em;
    color: #fff;
    margin-top: 3%;
    margin-left: 28.5%;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: inline-block;
  }

  

      Калькулятор металла
  
  

      ГОСТы и ТУ