△ 是新朋友吗？记得先点web前端学习圈关注我哦～
一.发送效果
HTML
1<div id="send-btn"> 2
CSS
#send-btn{
GIF图
二.霓虹效果
HTML
1<div id="neon-btn"> 2
CSS
1#neon-btn { 2
GIF图
三.边框效果
HTML
1<div id="draw-border"> 2
CSS
1#draw-border { 2
GIF效果
四.圆形效果
HTML
1<div id="circle-btn"> 2
CSS
1#circle-btn { 2
GIF图
五.圆角效果
HTML
1<div id="border-btn"> 2
CSS
1#border-btn { 2
GIF图
六.冰冻效果
HTML
1<div id="frozen-btn"> 2
CSS
1#frozen-btn { 2
GIF图
七.闪亮效果
HTML
1<div id="shiny-shadow"> 2
CSS
1#shiny-shadow { 2
GIF图
八.加载效果
HTML
1<div id="loading-btn"> 2
CSS
1#loading-btn { 2
GIF图
总结
巧用伪元素:before、:after等，让你的页面按钮眼前一亮。
源自：https://juejin.im/post/6861501624993447950
声明：文章著作权归作者所有，如有侵权，请联系小编删除。
感谢 · 转发欢迎大家留言
本文分享自微信公众号 - web前端学习圈（web-xxq）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。