Question

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

http://prntscr.com/g3t4zm

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

如何制作细线，如何在悬停时制作另一个圆圈？

有什么想法吗？

感谢。

现在它看起来像这样：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

要执行您要搜索的效果，一种方法是在CSS中使用 box-shadow ：

.col-lg-2 {
  width : 150px;
  height : 50px;
  text-align : center;
  color : white;
  background-color : #aaaaaa;
  border-radius : 25px;
  transition : 0.3s;
}

.col-lg-2 a {
  color : white;
  font-family : Arial;
  font-size : 22px;
  text-align : center;
  text-transform : uppercase;
  text-decoration : none;
  line-height : 50px;
}

.col-lg-2:hover {
  transition : 0.3s;
  box-shadow : 0px 0px 1px 8px #aaaaaa;
  background-color : #828282;
  cursor : pointer;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-round-lg">Info</a></div>
    </div>
  </div>
</div>

Answer 2

您可以在按钮周围添加隐藏边框，并在: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>

Answer 3

见：

＆＃13;

.btn {
  display: inline-block;
  padding: 10px 40px;
  background: #00b1ff;
  border-radius: 25px;
  color: #fff;
  border: 6px solid #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn:hover {
  border: 6px solid #81d9ff;
}

＆＃13;

<div class="btn">
  BUTTON
</div>

＆＃13;

Answer 4

这里有一个例子：

HTML：

<a href="#" class="btn btn-warning btn-round-lg">Warning</a>

CSS：

.btn-round-lg {
  background: #00b1ff none repeat scroll 0 0;
  border:8px solid #fff;
  border-radius: 37px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 3px;
  min-width: 186px;
  padding: 15px 20px;
  position: relative;
  text-transform: uppercase;
  transition:all 0.25s ease 0s;
  text-decoration:none;
  font-family:arial;
}
.btn-round-lg:hover {
  border: 8px solid rgba(129, 217, 255, 0.9);
  color: #fff;
}

Answer 5

您需要Bootstrap.min.css文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
.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;
  </style>
</head>

<body>
	  <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>
</body>
</html>

Answer 6

这会有帮助吗？

使用css动画：悬停属性。

设计带有border-radius的圆角。我知道你已经在你的例子中有了它们，但是你在询问如何在原始问题中创建这个设计......

＆＃13;

div{
  margin: 2em;
}

.mybutton{
  border: 3px solid blue; 
  margin: 3em;
  border-radius: 10px;
  padding: 10px;
  background-color: lightblue;
}

.mybutton:hover{
  border: 5px solid red;
}

＆＃13;

<div>
  <span class="mybutton">Click me</span>
</div>
<div>
  <span class="mybutton">Click me</span>
</div>
<div>
  <span class="mybutton">Click me</span>
</div>

＆＃13;

Answer 7

＆＃13;

.btn {
border-radius: 25px !important;
box-sizing: border-box;
border: 10px solid transparent !important;
}

.btn:hover {
border: 10px solid blue !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-2"><a href="#" class="btn btn-danger btn-xl btn-round-xl">Danger</a></div>

＆＃13;

带有悬停动画的Bootstrap按钮

7 个答案: