完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS3按钮效果</title> <style> *{ margin:0; padding:0; } html,body{ height:100%;background-color:#c1ebff; } body{ text-align:center; } body:before{ /*按钮垂直居中*/ content:'';display: inline-block;height:100%;vertical-align: middle; } button{ height:60px;padding:0 2em;background-color: #1aab8a;color:#fff;border:none;outline:none; font-size: 1.6em;cursor:pointer;position: relative; transition:all ease 800ms; } button:hover{ background-color: #fff;color:#1aab8a; } button:before,button:after{ content:''; position: absolute;top:0;right:0;width:0;height:2px;background-color: #1aab8a; transition:all ease 400ms; } button:after{ top:inherit;right:inherit;left:0;bottom:0; } button:hover:after,button:hover:before{ width:100%; transition:all ease 800ms; } </style> </head> <body> <button>Hover me ! </button> </body> </html>