Css圆形按钮边框加载动画点击答案

【问题标题】：Css round button border loading animation on clickCss圆形按钮边框加载动画点击
【发布时间】：2021-12-06 07:45:09
【问题描述】：

我正在努力实现这一目标

https://codepen.io/jerrylow/pen/eXmroN?editors=1100

这是我的按钮

<button type="button" rel="tooltip"
                            class="btn btn-outline-warning btn-round">
                            <span></span>
                            <i class="material-icons">save</i>
                        </button>
     height: 30px;
        min-width: 30px;
        width: 30px;
    border-radius: 50%;
    font-size: 24px;
    height: 41px;
    min-width: 41px;
    width: 41px;
    padding: 0;
    overflow: hidden;
    position: relative;
    line-height: 41px;
    color: #ff9800;
    background-color: transparent;
    border-color: #ff9800;
    border: 1px solid currentColor
    box-shadow: 0 2px 2px 0 hsla(0,0%,60%,.14),0 3px 1px -2px hsla(0,0%,60%,.2),0 1px 5px 0 hsla(0,0%,60%,.12);
    margin: .3125rem 1px;
    outline: 0;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    will-change: box-shadow,transform;

按钮应该是圆形的，我尝试将按钮更改为圆形，但动画是方形的，更改关键帧中的值也没有多大帮助

我想在点击按钮时使用它。我在 css 动画方面不是很好，感谢任何帮助。

【问题讨论】：

我无法从您的代码中编造一个代码笔。我认为这些样式不适合单一元素。请创建一支跑步笔codepen.io，以便我们更好地了解您的尝试并制定解决方案。

标签： css sass css-animations

【解决方案1】：

我对此进行了一些推理，我的猜测是动画边框是一个 2px 高的跨度，沿着按钮的边框框延伸，无论边框半径如何，它始终是平方的。我的猜测是这是不可能的。

【讨论】：