Здравствуйте!
Столкнулся с такой проблемой, когда кнопки стоят в один ряд, они увеличиваются вниз, мне нужно чтобы их увеличение происходило вверх, как исправить ошибку?
Разметку прикрепляю ниже:
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;
}
Ответ
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;
}
Комментариев нет:
Отправить комментарий