CSS-水纹按钮实例
<!DOCTYPE html> <html> <head><title>水纹按钮实例</title></head> <style type="text/css"> /* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */ /*打开注释及效果不扩散在外*/ } .ripple:focus{ outline: none; } .ripple:after { content: ""; display: block; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; background-color: #888; background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: all .3s; } .ripple:active:after { opacity: .3; top: 0; left: 0; right: 0; bottom: 0; transition: 0s; } /* 按钮反馈之波纹 */ </style> <body> <button class="ripple">我是水纹按钮</button> </body> </html>
本文作者:Love In Winter
本文链接:https://www.cnblogs.com/LifeDecidesHappiness/p/15683606.html
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以扫一扫,任意打赏,您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/LifeDecidesHappiness/p/15683606.html
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以扫一扫,任意打赏,您的鼓励是博主的最大动力!
![扫一扫,支付宝打赏](https://files.cnblogs.com/files/LifeDecidesHappiness/%E6%94%AF%E4%BB%98%E5%AE%9D.bmp)
![扫一扫,微信打赏](https://files.cnblogs.com/files/LifeDecidesHappiness/%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE%E7%A0%81.bmp)