Question

Well I have this code which is fairly simple and should set margin-top of HTML 5’s button element to 1px when it is active ( mouse clicked on it). But what I get is a messed up layout, because the button does what it should do only it does it for both of the buttons which are right next to each other. Can you tell me what is causing this error to occur?

Here is a sample HTML code (because i cant just link to jsfiddle), but the link to jsfiddle is right at the bottom

<header id="main_header"> <!-- this is your header with logo, menu, login and get started now buttons -->
    <div id="header_accent"></div> <!-- small accent image, barely seen on top of the page -->
    <div id="header_holder"> <!-- this guy centers the header to the middle of the page's width -->
        <img src="images/logo.png" alt="ssl8.com" id="logo"/> <!-- logo image -->
        <div id="nav_holder"> <!-- positions the navigation and buttons -->
            <nav>
                <ul> <!-- navigation -->
                    <li class="active"><a href="#">prices</a></li>
                    <li><a href="#">features</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </nav>
            <button class="login">login</button> <!-- login button -->
            <button class="getStartedNow">Get started now</button> <!-- get started now button -->
        </div>
        <div id="header_shadow"></div> <!-- holds the background shadow for the header (in CSS file) -->
    </div>
</header> <!-- END of header -->

Here is jsfiddle.Ignore missing pictures etc, just click on the orange button and you will see what i am talking about.

jsfiddle

Thank you

Answer 1

Here is my solution http://jsfiddle.net/burn123/emfwA/16/

What I Changed

1. You had the opacity, box-shadow, transitions, and border-radius set for the buttons set on both buttons, which is redundant. I changed it so that it would apply to all buttons
2. Browser prefixes are not needed for box-shadow or border-radius
3. For your login button, you forgot the period before your login class, so the css was trying to find a element named login, which doesn’t exist
4. Removed the active and hover from both elements and set a generic active and hover pseudo element
5. Added position relative to each button
6. On active, the button will be given a property of top: 1px
7. Changed the size of the header to min-width:100% so that the line will go all the way across

The main problem was coming from the fact that your buttons were set at a position of static, so by applying a margin-top of 1px, you were shifting the entire top down. By setting a position of relative, you can add properties such as top or left and it will move the element in that direction while still keeping the space of the element in the same position