Question

我正试图填充一个按钮，当它以动画的方式盘旋时工作正常。我使用：在css prop之前创建一个动画div来填充悬停时的按钮。我现在的问题是我在按钮上有一个border-radius，在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

从您的：之前删除边界半径，并在您的按钮上添加一个溢出：auto。

发生的事情是：在伪定位于按钮内部之前，而不是包括边框的完整尺寸。

或者您可以将之前的伪位置设置为不同，例如top：-3px，left：-3px，right：-3px，bottom：-3px;

Answer 2

你正在创建一个：之前错误的大小调整：我不确定这是怎么来的，但我知道如何解决这个问题。您的边框正在重新设置按钮大小。不幸的是，这个尺寸不会加在你的尺寸之前。您可以计算此大小（在您的情况下为3px）并在左右两侧添加此大小为负数。

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

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

制作幽灵填充动画按钮并具有边框半径问题

2 个答案: