Hello! Faced such a problem, when the buttons stand in one row, they increase down, I need to increase them up, how to correct the error? I attach the markup below:

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; } 
 <div class="footerbutton"> <div class="buttonsfooter"><a class="buttontext">Калькулятор металла</a></div> <div class="buttonsfooter"><a class="buttontext2">ГОСТы и ТУ</a></div> </div>

    1 answer 1

    display: inline-block; default have vertical-align: baseline; , it is worth aligning vertical-align: top; and both up buttons start to increase:

     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; } 
     <div class="footerbutton"> <div class="buttonsfooter"> <a href="#" class="buttontext">Калькулятор металла</a> </div> <div class="buttonsfooter"> <a href="#" class="buttontext">ГОСТы и ТУ</a> </div> </div>