按钮动画 - 波纹效果

资料来源：网络整理时间：2023/2/14 0:42:32 共计：3625 浏览

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #90EE90; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } </style> </head> <body> <h2>按钮动画 - 波纹效果</h2> <button class="button">Click Me</button> </body> </html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css3按钮波纹效果 | ·下一条：waves 波纹