特点：
1、圆角边框 border-radius
2、文字有背景 text-shadow
3、按钮有阴影 box-shadow
4、文字有向上的阴影 text-shadow
5、按钮背景色有个从上往下的渐变效果 linear-gradient
6、点击后明显有个下按效果
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="style.css"> <style> .btn{ background-color: #ee432e; background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%,#b51700 50%, #891100 100%); background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%,#b51700 50%, #891100 100%); background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); border: 1px solid #951100; padding: 12px 20px 14px 20px; border-radius: 5px; text-decoration: none; color: #fff; font: bold 20px/1 “helvetica neue”, helvetica, arial, sans-serif; text-align: center; box-shadow: 0 1px 3px #333333; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8); position:relative; display:inline-block; cursor:pointer; } .btn:active { position: relative; top: 1px; } </style> <script src="script.js"></script> </head> <body> <div class="btn">aaa</div> </body></html>有渐变还用 background-color的原因是当浏览器不支持渐变属性的时候显示背景色，这个就没有立体感了：
当然懒货可以用 http://css3button.net/ 来生成css3按钮：
改变字体大小，按钮大小也随之改变
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
