网站CSS3-Hover按钮边框动画特效代码 - 网站代码 - 五行资源分享网

网站CSS3-Hover按钮边框动画特效代码

作者头像图片

作者: 五行

网络资源搬砖的爱好者

文章二维码手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,如有侵权请联系!

纯CSS3代码Hover按钮边框动画特效来讲,这段css代码还是比较美观的,对于来展示五行资源博客网站的细节是非常不错的,稍微改改适合自己网站fee主题的颜色就能使用了。

适用浏览器: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按钮边框动画特效代码-五行资源分享网-第1张图片

本文最后更新于2022-5-5,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 五行, 转载或复制请以 超链接形式 并注明出处 五行资源分享网
原文地址: 《网站CSS3-Hover按钮边框动画特效代码》 发布于2022-5-5 09:29
帖子声明: 本站对文章进行整理、排版、编辑,是出于传递信息之目的, 并不意味着赞同其观点或证实其内容的真实性,不拥有所有权,不承担相关法律责任。

评论

在线链接输入图片 打卡按钮图片 私密评论按钮图片 75 + 58 =
乱评论、多次评论者一律禁言帐号或封禁IP
本站已经全面开启缓存,评论查看隐藏内容需等待1分钟后再刷新本页!
  1. 1楼
    用户头像图片
    1550048721 用户 Lv.4
    IP地址:未知

    滴!学生卡!请上车的乘客系好安全带~

    • 评论内容图片


 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

打赏图片