Css圆形按钮边框加载动画

Question

我正在努力实现这个

https://codepen.io/jerrylow/pen/eXmroN?编辑= 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动画，任何帮助是感激的。

Answer 1

我对它进行了一点推理，我的猜测是动画边框是一个2px高的跨度，沿着按钮的边框运行，无论边框半径如何，它总是平方的。我猜那是不可能的。