I want buttons to resize downwards when hovered, but I also want the other buttons to stay at their initial positions. Shall I put each button in grids and set fixed size? Is it possible to do it in CSS? i was laso thinking of putting margin with no-hover button and delete the margin with hover one.
Hi,
first of all, it's great to be here. I'm new to web design and I encountered such problem.
http://codepen.io/ziemowit/pen/GgCjm
I want buttons to resize downwards when hovered, but I also want the other buttons to stay at their initial positions. Shall I put each button in grids and set fixed size? Is it possible to do it in CSS? i was laso thinking of putting margin with no-hover button and delete the margin with hover one.
Any help would be appreciated.
whodunit
Simply add
vertical-align: topto the#input_contactselector and it will re-size the element from the top not the middle.I updated your pen that includes the above and it fixes the transition.
http://codepen.io/ChrisUpjohn/pen/gyhIF
For the button try locking it to the top of the div, so it expands downwards.
@SgtLegend Ha! That was so easy! Thank you kindly, Sir! :)
@ danieldatton: unfortunately it doesn't work; I tried it before asking here.