Bootstrap/CSS：当Bootstrap处于活动状态时，如何在圆按钮中添加单独的圆半径

嗨，伙计们，我有一个关于在css和引导中做循环的问题。 我有一个边界半径等于50%的引导按钮。 我的目标是在其处于活动状态时创建一个单独的边界半径

我的第一个方法是操纵轮廓，我有一些改进，但是

---

我不能画出我的轮廓圈，所以我的下一个问题是有可能画出轮廓圈吗？谢谢大家

使用一个绝对定位的伪元素，它位于按钮之外

按钮{
宽度：100px；
高度：100px；
显示：内联块；
背景：紫色；
位置：相对位置；
边缘：1米；
}
按钮，按钮：之后{
边框：3倍纯黑；
边界半径：50%；
}
按钮。活动：之后{
位置：绝对位置；
顶部：-1米；左侧：-1米；右侧：-1米；底部：-1米；
内容：''；
背景：线性梯度（90度，黑色，白色）；
变换：旋转（45度）；
转变：转变.25s；
}

按钮
按钮

如果你做了代码，请提供fiddleuse伪元素。谢谢chirag爵士的回复，但我只是处理了我刚刚添加的几个代码。btn primary{边界半径：50%；}。btn primary:focus，.btn primary:active{大纲：#00FF00点粗；}你能提供一些代码和解释吗，先生？谢谢嗨michael你知道如何在：after psuedo元素处于活动状态时添加带过渡的旋转变换吗？我试过了，但似乎没用，谢谢