Я пытался создать кнопку в CSS, которая, похоже, выглядит "нажатой" на :active
, для этого я добавил 2px
в padding-top
и вычитал 2px
из padding-bottom
. Однако, похоже, это добавляет преимущество для других элементов, хотя я не могу понять, почему.
Я уверен, что решение является простым для опытных пользователей CSS.
Вы используете inline-block
на кнопках, выравнивание по умолчанию которых является "базовым".
Попытайтесь изменить это, добавив это в свой Buttton CSS
vertical-align: top; /* or middle or bottom */
Многие способы сделать это, но чтобы переместить всю кнопку (а не только текст), вы можете сделать что-то подобное, что изменяет margin-top, а не padding:
*:active, *:focus {
outline: none;
}
button {
display: inline-block;
margin: 0;
border: 0;
padding: 8px 16px;
border-radius: 4px;
background-color: #a9a9a9;
color: #fff;
overflow: hidden;
transition: padding-top 100ms linear, padding-bottom 100ms linear, box-shadow 100ms linear, -webkit-filter 100ms linear;
vertical-align: top;
}
button.suggested {
background-color: #0074d9;
}
button:active {
-webkit-filter: brightness(0.5);
margin-top: 2px;
box-shadow: 0 2px rgba(0, 0, 0, 0.5) inset;
vertical-align: bottom;
}
vertical-align:top
поvertical-align:top
илиvertical-align:middle
не будет изменена путем регулировки отступов (изменяется только путем регулировкиheight
).