Mein ganzes Formular bewegt sich ein paar Pixel nach unten, wenn ich auf "Speichern" klicke und ich möchte vermeiden, dass

Question

Ich wollte eine ausgefallene Schaltfläche erstellen, die aussieht, als würde sie angeklickt, wenn jemand darauf klickt. Leider habe ich auf meinem Mac bemerkt (sowohl Chrome und Firefox neuesten Browser), wenn ich auf die Schaltfläche "Speichern" klicken, bewegt sich die gesamte div mit dem Formular (identifiziert durch die "Profil" ID unten) ein paar Pixel nach unten Ich klicke auf die Schaltfläche "Speichern". Ich habe diese JSFiddle erstellt, um zu demonstrieren - https://jsfiddle.net/05qxeaok/2/. Ich habe

<div id="profile" class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
    <form class="edit_user" id="edit_user_2" action="https://stackoverflow.com/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="zNwIQCm3caY33TTc1cs3j2yCVI8VVCWhNHR7RsUuY/d0hqYjeMTCtS85diQv6nKGcX8PbzXTZYHQqCVthMWh1A==" /> 

    <h2>Tell Us More ...</h2> 

     <div class="profileField"> 
     Height 
     <input size="2" class="form-control" type="text" value="2" name="user[height_feet]" id="user_height_feet" /> ft. 

     <input size="2" class="form-control" type="text" value="1" name="user[height_inches]" id="user_height_inches" /> in. 
     </div> 

     <div class="profileField"> 
     <label for="user_weight">Weight</label> 
     <input size="3" class="form-control" type="text" name="user[weight]" id="user_weight" /> lbs. 
     </div> 

     <div class="profileField"> 
    <input type="submit" name="commit" value="Save" method="put" class="button" /> 
     </div> 
</form> 
</div> 
</div> 

Die Klasse für die Schaltfläche ist

.button { 
    margin: 0 0 5px; 
    padding: 0 12px; 
    height: 28px; 
    line-height: 28px; 
    font-size: 18px; 
    font-weight: bold; 
    color: #555555; 
    text-decoration: none; 
    text-shadow: 0 1px white; 
    background: #dfdfdf; 
    border-width: 1px 1px 0; 
    border-style: solid; 
    border-color: #cecece #bababa #a8a8a8; 
    border-radius: 3px 3px 2px 2px; 
    outline: 0; 
    display: inline-block; 
    vertical-align: baseline; 
    zoom: 1; 
    *display: inline; 
    *vertical-align: auto; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    background-image: -moz-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    background-image: -o-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    background-image: linear-gradient(to bottom, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25); 
    box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25); 
} 

.button:hover, .button:active { 
    background: #dfdfdf; 
    border-top-color: #c9c9c9; 
} 

.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active { 
    vertical-align: -5px; 
    margin-bottom: 0; 
    padding: 1px 13px 0; 
    border-width: 0; 
    border-radius: 3px; 
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white; 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white; 
} 

Wenn ich den 'class = ‚button‘' Attribut vom Button zu entfernen, dann die div mit id = „Profil“ bewegt sich nicht runter wenn ich auf den Knopf klicke, aber dann verliere ich mein ganzes Styling auf dem Knopf. Wie stelle ich Dinge so ein, dass nur meine Schaltfläche nach unten bewegt wird, wenn ich darauf klicke, anstatt auf das gesamte Formular zu klicken?

Bearbeiten: Der Container (Element mit ID = "Profil") hat die folgenden CSS. Ich versuche, alles in der Mitte des Bildschirms zu zentrieren

#profile { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    text-align:center; 
} 

Answer 1

Das ist, weil der im :active Zustand entfernt wird. Sie können den gleichen Betrag zu margin-top hinzufügen, um die Lücke zu schließen.

.button:active { 
    margin-top: 5px; 
} 

Answer 2

Sie sollten versuchen, die Größe des Formulars zu ändern. Ich denke, dass Sie eine feste Höhe des Formulars haben und der Knopf ist unten und Ihr Knopf hat am Anfang 5px unteren Rand, der beim Klicken auf 0 reduziert.

Also Ihre Schaltfläche wird zusätzlichen Platz nehmen, wenn es geklickt wird.

Ich glaube nicht, dass Sie das brauchen, aber überprüfen Sie es, wenn einige css Margin-Eigenschaft aus Ihrem Gehirn gerutscht sein kann. This link