<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="style/css.css" rel="stylesheet" type="text/css"> </head> <body> <button class="btn btn-1 btn-1a">Button</button> <button class="btn btn-1 btn-1b">Button</button> <button class="btn btn-1 btn-1c">Button</button> <button class="btn btn-1 btn-1d">Button</button> <button class="btn btn-1 btn-1e">Button</button> <button class="btn btn-1 btn-1f">Button</button> <button class="btn btn-2 btn-2g">Button</button> </body> </html> <style> body{background: #aaa} .btn{ padding:25px 80px; transition: all .3s ease; background: none; cursor: pointer; color:#fff; display: inline-block; margin: 15px 30px; position: relative; outline: none; border: none; } .btn:after{ content:''; position: absolute; transition: all .3s ease; z-index: -1; } .btn:before{ content: ''; position: relative; transition: all .3s ease; } .btn-1 { border: 3px solid #fff; color: #fff; } .btn-1a:hover{ background: #fff; color:blue; } .btn-1b:after{ content: ''; width: 100%; height: 0%; background: #000; left: 0; top:0; } .btn-1b:hover:after{ height: 100%; } .btn-1c:after{ content: ''; width: 0%; height: 100%; background: #000; left: 0; top:0; } .btn-1c:hover:after{ width: 100%; } .btn-1d{overflow: hidden;} .btn-1d:after{ content: ''; width: 0%; height: 105%; background: #000; transform: translate(-50%,-50%); left: 50%; top:50%; opacity: 0; } .btn-1d:hover:after{ width: 90%; opacity: 1; } .btn-1d:active:after{ width: 100%; } .btn-1e{overflow: hidden;} .btn-1e:after{ content: ''; height: 200%; width: 0; background: #000; left: 50%; top:50%; transform: translate(-50%,-50%) rotate(-45deg); opacity: 0.1; } .btn-1e:hover:after{ width: 200%; opacity: 1; } .btn-1e:active:after{ height: 300%; } .btn-2 { background: #cb4e4e; color: #fff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-2g{ border-radius: 40px; } .btn-2g:hover{ box-shadow: 0px 4px #ab3c3c; top:2px; } .btn-2g:active{ box-shadow: 0px 0px; top:6px; } </style>
自己尝试实现了几个效果，总结下制作方法（如在不同浏览器下看不到效果请在css3属性上加上个浏览器的前缀）：
1：设置按钮的transition属性，做统一的过渡效果，包括按钮的:before，:after的过渡属性。
2：设定不同变化效果。例如高度的变化，阴影的变化，top的属性。
3：必须要设置:before,:after的content属性，即使设置为空。
4：：after的z-index须设置层级在按钮下。
参考地址：http://www.jiawin.com/demos/creative-button-styles/index.html