CSS: how to prevent link button from changing size when changing border-top and border-bottom?

Question

I want a specific look for my buttons where they kinda look like they're protruding, and would depress when clicked.

.button
{
background: red;
color: white;
border-top: 0;
border-bottom: 0.2em solid orange;
padding: 1em;
display: inline-block;
}
.button:active
{
border-top: 0.2em solid white;
border-bottom: 0;
}

<a class="button" href="">Button 1</a>
<a class="button" href="">Button 2</a>

Despite the fact that the total height doesn't change, both buttons will drop by 0.2em when I click on either one. The parent container would also gain 0.2em in height.

Expected behavior:
The clicked button loses the bottom border but gains a white top border, so it looks like it has been depressed (the text will move down with it when clicked). This shouldn't affect the height or position of unclicked buttons.

Can anyone give me a hand with this?

Answer 1

Just change button baseline aligned to top.

.button {
vertical-align: top;
}

Answer 2

Daryl hi, Daryl you can use hover button by which when you click on button some especial effect on horizontal, vertical can be possible to do which made that more good

Just an example try
button:hover:before { width: 25%;
height: 25%;}
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease; }

ping me if you need some other answer I'll get back to you on that

till that have these 🍎 🍎 🍎 🍎 🍎