css3立体按钮代码_CSS3教程,CSS3动画教程,HTML5教程,HTML5+教程,HTML5 PLUS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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>
提示：您可以先修改部分代码再运行

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

css3立体按钮代码

猜你喜欢