时间：2021-07-01 10:21:17 帮助过：20人阅读
![3$[5GTKMLR]E81)G)UUBZG0.png](https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/1511145800379721.png "1511145800379721.png")
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style>
a{
text-decoration:none;
user-select:none;
position: relative;
display: block;
margin: 100px auto;
width:120px;
height:50px;
line-height:50px;
text-align:center;
border-radius:25px;
color:#fff;
font-size:16px;
cursor:pointer;
background-color: #ff8300;
box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
overflow: hidden;
}
a:after{
position: absolute;
content: "";
display: block;
margin: auto;
left: -40px;
top:-75px;
width: 200px;
height: 200px;
background: #ff8300;
border-radius: 50%;
opacity: 0;
transition: all 0.8s;
}
a:hover{
background-color: #FF9D00;
top:-2px;
box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
}
a:active{
background-color: #ff8300;
top:0;
box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
}
a:active:after{
width: 0;
height: 0;
left:60px;
top: 25px;
opacity: 1;
transition-duration: 0s;
}
</style>
</head>
<body>
<a href="javascript:void(0)">PHP中文网</a>
</body>
</html>以上就是全部的css水波按钮特效，更多关于css的文章请到PHP中文网搜索
相关推荐：
css鼠标悬停动画
css波纹动画
css，js骰子抽奖源码
以上就是css水波按钮特效的详细内容，更多请关注Gxl网其它相关文章！