html - 按钮悬停使向下元素跳舞

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有3px的透明边框

.btn {
    border: 3px solid transparent;
}

想法是让边框的宽度保持不变，但只改变 :hover 的颜色