按钮环绕一周css代码 按钮动效代码

效果图

html

<div class="btn-animate btn-animate__around">
<svg>
    <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
</svg>
大刚资源网
</div>

css

.btn-animate {
 position: relative;
 width: 130px;
 height: 40px;
 line-height: 40px;
 border: none;
 border-radius: 5px;
  background: #027efb;
color: #fff;
  text-align: center;
}

.btn-animate__around {
  background: transparent;
  color: #027efb;

  & > svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

& > rect {
  fill: none;
  stroke: #027efb;
  stroke-width: 3;
  stroke-dasharray: 422, 0;
  transition: all .5s linear;
}
  }

  &:hover {
font-weight: 600;

& > svg {
  & > rect {
    stroke-width: 5;
    stroke-dasharray: 15, 260;
    stroke-dashoffset: 50%;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
  }
}