btn 抖动问题

button将span一个元素放入其中并使用button: hover进行动画处理span。
button哈：只是用来接hover的假人，主体处于span一个状态。
但是，如果只使用： hover ，则当鼠标指针移动到button动画后span的位置（范围外）时，它会返回，所以：hover 也必须定义。

<html><body>
  <div class="wrap">
    <button><span class="type-1">按钮1</span></button>
    <button><span class="type-2">按钮2</span></button>
    <button><span class="type-3">按钮3</span></button>
  </div>
</body></html>

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
html, body {
  width: 100%;
  height: 100%;
}
.wrap {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
button {
  margin: 1em;
  cursor: pointer;
  outline: none;
  font-size: 2em;
}
button span {
  display: block;
  padding: .5em 2em;
  border-radius: 5px;
  transition: 500ms;
}

.type-1 {
  background: #222;
  color: #fff;
}

.type-1:hover,
button:hover .type-1,
button:focus .type-1 {
  transform: translateY(-1em);
}
.type-2 {
  background: #222;
  color: #fff;
}
.type-2:hover,
button:hover .type-2,
button:focus .type-2 {
  transform: rotateZ(20deg);
}
.type-3 {
  background: #222;
  color: #fff;
}
.type-3:hover,
button:hover .type-3,
button:focus .type-3 {
  transform: scale(.8);
}

评论 (0)