javascript - 制作一个幽灵填充的动画按钮并且边界半径有问题

Question

我正在尝试以动画方式悬停时填充按钮，效果很好。我使用 :before css 属性创建了一个动画 div 以在鼠标悬停时填充按钮。我现在的问题是我在按钮上有一个 border-radius 并且在 :before div 上有完全相同的 border-radius，但它们不匹配。

<div class="flex">
  <button href="#0" class="bttn">Continue</button>
</div>

---

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';

$font:'Source Sans Pro', sans-serif;
$primary:#FF0072;

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

html, body{
    height:100%;
    width: 100%;
}

body {
  padding:0px;
  margin:0;
  font-family:$font;
  background: #F5F0FF;
  -webkit-font-smoothing: antialiased;
}

.flex {
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

button.bttn {
  color:$primary;
  border-radius: 22px;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
  &:hover {
    color:#FFF;
  }
  &:focus {
    color:#FFF;
  }
}

.bttn {
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:inline-block;
  text-align:center;
  width:270px;
  font-weight:bold;
  padding:14px 0px;
  border:3px solid $primary;
  border-radius:2px;
  position:relative;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
  &:before {
    -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
     border-radius: 22px;
    top:0;
    left:50%;
    right:50%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:$primary;
    z-index:-1;
  }
  &:hover {
    &:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
  &:focus {
    &:before {
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
}

这是一个代码笔来展示我目前拥有的东西。 https://codepen.io/anon/pen/YvxLKp

Answer 1

您正在创建一个大小错误的 :before :我不确定这是怎么回事，但我知道如何解决这个问题。您的边框正在增加您的按钮大小。不幸的是，这个尺寸不会加到你的 :before 尺寸上。您可以计算此尺寸(在您的情况下为 3px)并在左右两侧添加此尺寸负数。

&:hover {
    &:before {
        -webkit-transition:0.5s all ease;
        transition:0.5s all ease;
        left: -3px;
        right: -3px;
        opacity:1;
    }
}

你可以对焦点状态做同样的事情