ボタンをクリックすると要素がダンスダンスになります

Question

ログインボタンのホバー上でパスワードを忘れた場合のリンクを止めたいと思います。ボタンの下にあるすべての要素は、ボタン内を移動するとバウンスするとバウンスします。問題を説明するためにページの一部だけを投稿しました。

私は、ホバー上のボタンのボーダーを3pxから1pxに減らそうとしました。しかし、ホバー効果は明ら​​かに目に見えません。

必要に応じて、html構造を変更することができます。しかし、それについてどうやって行くのかわからない。

*:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    font-size: 10px; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
    font-family: sans-serif; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
} 
 

 
body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #333; 
 
    background-color: #fff; 
 
} 
 

 
div { 
 
    display: block; 
 
} 
 

 
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 
 
    display: block; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    margin-bottom: 5px; 
 
    font-weight: bold; 
 
    cursor: default; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 

 
.form-group { 
 
    margin-bottom: 15px; 
 
} 
 

 
.form-control { 
 
    display: block; 
 
    width: 100%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
} 
 

 
input, button, select, textarea { 
 
    font-family: inherit; 
 
    font-size: inherit; 
 
    line-height: inherit; 
 
} 
 

 
input { 
 
    line-height: normal; 
 
} 
 

 
button, input, optgroup, select, textarea { 
 
    margin: 0; 
 
    font: inherit; 
 
    color: inherit; 
 
} 
 

 
button, html input[type="button"], input[type="reset"], input[type="submit"] { 
 
    -webkit-appearance: button; 
 
    cursor: pointer; 
 
} 
 

 
.btn-primary { 
 
    color: #fff; 
 
    background-color: #337ab7; 
 
    border-color: #2e6da4; 
 
} 
 

 
.btn { 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
} 
 

 
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 
 
    color: #ffffff; 
 
    background-color: #178acc; 
 
    border-color: lightslategrey; 
 
    border-width: 3px; 
 
} 
 

 
.btn-primary:hover { 
 
    color: #fff; 
 
    background-color: #286090; 
 
    border-color: #204d74; 
 
} 
 

 
.btn:hover, .btn:focus, .btn.focus { 
 
    color: #333; 
 
    text-decoration: none; 
 
}

<section id="loginSection"> 
 
    <form method="post" action="Index" role="form" id="loginForm" name="loginForm" > 
 
    <div class="form-group"> 
 
     <label for="UserName">User ID</label> 
 
     <input autocomplete="off" class="form-control" 
 
      id="UserName" name="UserName" type="text" value=""> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label for="Password">Password</label> 
 
     <input autocomplete="off" class="form-control" 
 
      id="Password" name="Password" type="password" value=""> 
 
    </div> 
 
    <div> 
 
     <input type="button" id="btnLogin" title="Login" name="btnLogin" class="btn btn-primary" value="Login" /> 
 
    </div> 
 
    </form> 
 
    <div class="form-group"> 
 
    <a href="/ForgotPassword">Forgot your password?</a> 
 
    </div> 
 
</section>

Answer 1

.btnが

.btn { 
    border: 3px solid transparent; 
} 

3px透明の境界線を持っているアイデアは、境界線の幅は同じままにすることですが、唯一:hover

に色を変更してください

Answer 2

他の何かが動作すると、ラップするdivに固定の高さが設定されますあなたのボタン。 あなたが最初のラッパーにクラスを追加する必要があります。その後、

<div class="button-wrapper"> 
    <input type="button" id="btnLogin" title="Login" name="btnLogin" class="btn btn-primary" value="Login" /> 
</div> 

そして、あなたのCSSに以下を追加：

.button-wrapper { 
    height: 35px; 
}