html - 带有悬停动画的 Bootstrap 按钮

Question

我正在寻找编码这个设计元素的解决方案。

http://prntscr.com/g3t4zm

我的主要问题是第一个按钮的设计和悬停时的动画。

如何在周围做细线，悬停时如何在周围再做一个圆圈？

有什么想法吗？

谢谢。

现在看起来像这样:

.inner-addon {
  position: relative;
}


/* style glyph */

.inner-addon .glyphicon {
  position: absolute;
  padding: 5px;
  pointer-events: none;
}


/* add padding  */

.left-addon input {
  padding-left: 30px;
}

.btn-round-lg {
  border: 5px solid;
  border-radius: 26px;
}

.btn-round-xs {
  border-radius: 26px;
  padding-left: 10px;
  padding-right: 10px;
  border: 5px solid;
}

.inp {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!--<div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-default btn-round-lg">Default</a></div>-->
      <div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-success btn-round-lg">Success</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-round-lg">Info</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-warning btn-round-lg">Warning</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-danger btn-round-lg">Danger</a></div>
    </div>
    <div class="col-lg-12">
      <!--<div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-default btn-xs btn-round-xs">Default</a>-->
      <!--</div>-->
      <div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-success btn-xs btn-round-xs">Success</a>
      </div>
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-xs btn-round-xs">Info</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-warning btn-xs btn-round-xs">Warning</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-danger btn-xs btn-round-xs">Danger</a></div>
    </div>
  </div>
</div>

Answer 1

您可以在按钮周围添加一个不可见的边框，并在 :hover 上将其替换为蓝色边框，并像这样使用 transition 使其平滑:

.button {
  padding: 4px 10px;
  display: inline-block;
  border-radius: 50px;
  background-color: #00B1FF;
  color: white;
  border: 5px solid white;
  transition: border 0.2s ease;
}
.button:hover {
  border: 5px solid #81D9FF;
  cursor: pointer;
}

<div class="button">Button</div>

至于另一个按钮，

.button {
  padding: 4px 10px;
  display: inline-block;
  border-radius: 50px;
  color: blue;
  border: 2px solid blue;
  cursor: pointer;
}
.button:hover {
  box-shadow : 0px 0px 0px 5px #00B1FF;
}

<div class="button">Button</div>