CODEWITHSUNDEEP
htmlcss
José Tomás Tocino
José Tomás Tocino

Reputation: 10069

Div inside button element ignores CSS margin-top setting

I'm looking to create a "sliding door" effect using a button tag (because it's for a form's submit button), but it's not working. Check this fiddle: http://jsfiddle.net/gf8bV/14/

In the fiddle you see that, with the same code, it works for the div but not for the button. Why is that? Any solution?

Upvotes: 1

Views: 3346

Answers (2)

moopet
moopet

Reputation: 6175

I'm not sure why margins don't work the same inside buttons, but if you don't want to add extra markup you can achieve the same effect with position instead of margin, by setting the button to position: relative, the divs to absolute and then shifting them both up on hover.

http://jsfiddle.net/moopet/gdyys/1/

Upvotes: 3

José Tomás Tocino
José Tomás Tocino

Reputation: 10069

Ok, I've finally solved it wrapping everything inside the button in another div:

http://jsfiddle.net/gf8bV/21/

Upvotes: 0

Related Questions