0

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

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?

29th May 2019, 7:00 AM
Daryl
Daryl - avatar
2 ответов
+ 1
Just change button baseline aligned to top. .button { vertical-align: top; }
29th May 2019, 7:17 AM
Calviղ
Calviղ - avatar
+ 1
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 🍎 🍎 🍎 🍎 🍎
29th May 2019, 7:09 AM
DishaAhuja
DishaAhuja - avatar