HTML CSS Button Positioning

Question

I have 4 buttons in a header div  I have placed them all using margins top and left in css so they are all next to each other in one line  Nothing fancy   Now I m trying to do an action when the button is pressed the button text moves down a little bit   I m using this code in CSS         btnhome active      line-height   25px      HTML     lt div id  header  gt                      lt button id  btnhome  gt Home lt  button gt                     lt button id  btnabout  gt About lt  button gt           lt button id  btncontact  gt Contact lt  button gt           lt button id  btnsup  gt Help Us lt  button gt                      lt  div gt    Button CSS example     btnhome         margin-left  121px      margin-top  1px      width  84px      height  45px         background  transparent      border  none      color  white         font-size 14px      font-weight 700      Also those buttons work on a header background  I m sure it has something to do with these settings     header       background-image  url images navbar588 png       height  48px      width  588px      margin  2em auto             It works well but the only problem is that the all other buttons also move their text down  Why Is that  Aren t I clearly clarifying that I want to use  btnhome only  All the buttons have completely different ID s  All buttons have the same CSS settings except the margins  What do I need to edit   Thank you very much

User · Accepted Answer

as I expected  yeah  it s because the whole DOM element is being pushed down  You have multiple options  You can put the buttons in separate divs  and float them so that they don t affect each other  the simpler solution is to just set the  active button to position relative  and use top instead of margin or line-height  example fiddle  http   jsfiddle net 5CZRP

User · Answer

type submit       margin-left  121px      margin-top  19px      width  84px      height  40px         font-size 14px      font-weight 700

User · Answer

try changing that line-height change to a margin-top or padding-top change instead   btnhome active  margin-top   25px      Edit  You could also try adding a span inside the button    lt div id  header  gt                  lt button id  btnhome  gt  lt span gt Home lt  span gt  lt  button gt                 lt button id  btnabout  gt About lt  button gt       lt button id  btncontact  gt Contact lt  button gt       lt button id  btnsup  gt Help Us lt  button gt              lt  div gt    Then style that    btnhome span active   padding-top 25px

User · Answer

Use margins instead of line-height and then apply float to the buttons  By default they are displaying as inline-block  so when one is pushed down the hole line is pushed down with him  Float fixes this    header button       float left      Here s a working jsfidle

[html] HTML CSS Button Positioning

Examples related to html

Examples related to css

Examples related to button

Examples related to position

Examples related to pressed