css3立体按钮代码 来源:未知 作者: 类型:图文教程 点击次数: 发布时间:2018-09-12 14:00:53 css3立体按钮代码 本css3立体按钮,使用了css3的线性渐变背景linear-gradient、盒子阴影box-shadow、圆角border-radius等,配合css2的一些属性做出来的渐变背景、有投影有高光,并且圆角带边框的立体按钮,效果不错,在这里分享出来,代码如下,运行即可看到效果: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> </head> <body> <style> .btn{ background: linear-gradient(to bottom,#53a9e9,#2e76d1); border-radius: 9999px; display: block; width: 120px; height: 40px; text-align: center; line-height: 40px; margin: 150px auto; font-size:14px; color: #fff; position: relative; border: 1px solid #3266a5; box-shadow: 0 2px 2px 0 rgba(0,0,0,.3); } .btn:before{ content: ""; position: absolute; top:0; left:0; right: 0; border-radius: 9999px; height: 40px; background: linear-gradient(to bottom,#72b9eb,rgba(0,0,0,0) 10%); } .btn:after{ content: ""; position: absolute; bottom:0; left:0; right: 0; border-radius: 9999px; height: 40px; background: linear-gradient(to top,#3e83dd,rgba(0,0,0,0) 10%); } </style> <a class="btn">在线支付交班</a> </body> </html> 提示:您可以先修改部分代码再运行 TAGS: css3立体按钮 上一篇: CSS的background简写 下一篇: 使用 PostCSS 进行 CSS 处理