Javascript 制作充满鬼影的动画按钮和边界半径有问题

我试图填补一个按钮时，悬停在一个动画的方式，这是工作得很好。我使用：before css道具创建了一个动画div，以在悬停时填充按钮。我现在的问题是，我在按钮上有一个边界半径，在：before div上有相同的精确边界半径，但它们不匹配

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

这里是一个代码笔，显示我目前拥有的。

---

从：before pseudo中删除边界半径，并在按钮中添加溢出：auto

现在发生的是：before伪定位在按钮内部，而不是包括边框在内的完整大小

---

或者，您可以以不同的方式放置前伪对象，例如顶部：-3px，左侧：-3px，右侧：-3px，底部：-3px

从伪：before中删除边界半径，并在按钮中添加溢出：auto

现在发生的是：before伪定位在按钮内部，而不是包括边框在内的完整大小

---

或者，您可以以不同的方式放置前伪对象，例如顶部：-3px，左侧：-3px，右侧：-3px，底部：-3px

您正在创建一个：之前使用了错误的大小：我不确定这是如何产生的，但我知道一种解决方法。您的边框正在缩小您的按钮大小。不幸的是，这个尺寸与您的：before尺码不符。你可以计算这个尺寸（在你的例子中是3倍），然后在你的左右两边加上这个负数

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

---

您可以对焦点状态执行相同的操作，您正在创建一个：之前使用错误的大小：我不确定这是如何发生的，但我知道如何解决这个问题。您的边框正在缩小您的按钮大小。不幸的是，这个尺寸与您的：before尺码不符。你可以计算这个尺寸（在你的例子中是3倍），然后在你的左右两边加上这个负数

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

您可以对焦点状态执行相同的操作