Resize CSS problem

[whodunit]

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

[SgtLegend]

Simply add `vertical-align: top` to the `#input_contact` selector 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

[danieldatton]

For the button try locking it to the top of the div, so it expands downwards.

#button:hover {position:absolute; toptop:0;}

[whodunit]

@SgtLegend Ha! That was so easy! Thank you kindly, Sir! :)

@ danieldatton: unfortunately it doesn’t work; I tried it before asking here.

[Author]

Posts