CSS3-Hover按钮边框动画特效-路羽博客-第1张图片

CSS3-Hover按钮边框动画特效

CSS3-Hover按钮边框动画特效-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

CSS3-Hover按钮边框动画特效-路羽博客-第3张图片微信小程序

路羽博客 资源分享

       

介绍:

纯CSS3 Hover按钮边框动画特效,还是比较美观的,对于来展示网站的细节是非常不错的,稍微改改适合自己网站主题的颜色就能使用了。

适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

实现css

button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#fff;
  color:#1AAB8A;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

预览

CSS3-Hover按钮边框动画特效-路羽博客-第4张图片

分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《CSS3-Hover按钮边框动画特效》 发布于2022-5-4

评论

          
       
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

路羽博客验证码