鼠标悬停在上面就会出现这个类似描边效果，纯css可以实现吗？想实现一样的效果具体怎么弄呢？

可以实现主要依靠animation-delay属性，可以自行搜索下

这个描边动画效果是怎么实现的呢？

开始我想尝试用伪类来实现，但z-index好像没办法处理，所以就这样模拟了。
demo

<style type="text/css">
.btn{
    position: relative;
    height: 45px;
    width: 200px;
    background: #fff;
    color: #6cf;
    text-align: center;
    line-height: 45px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.b-l{
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    left: -1px;
    top: -2px;
    background: #6cf;
    z-index: -1;
    -webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s;
    transition:width 1s linear 2s,height 0.5s linear 1.5s;
}

.b-r{
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    right: -1px;
    bottom: -2px;
    background: #6cf;
    z-index: -1;
    -webkit-transition:width 1s linear 0.5s,height 0.5s linear;
    transition:width 1s linear 0.5s,height 0.5s linear;
}

.btn:hover .b-l{
    -webkit-transition:width 1s linear,height 0.5s linear 1s;
    transition:width 1s linear,height 0.5s linear 1s;
    width: 201px;
    height: 46px;
}

.btn:hover .b-r{
    -webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
    transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
    width: 201px;
    height: 46px;
}
</style>
<body>
<div class="btn">
    <div class="b-l"></div>
    <div class="b-r"></div>
    btn
</div>
</body>

这个描边动画效果是怎么实现的呢？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？