css 实现鼠标滑过流光效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            .button {
                 display: block;
                 position: relative;
                 background:#00B16A;
                 color: #fff;
                 width: 160px;
                 height: 50px;
                 line-height: 50px;
                 text-align: center;
                 font-family: 'Ubuntu', sans-serif;
                 font-size: 15px;
                 font-weight: bold;
                 text-decoration: none;
                 margin: 50px auto 0;
                 border-radius: 2px;
                 overflow: hidden;
                 -webkit-transition: all 0.15s ease-out;
                 transition: all 0.15s ease-out;
                }   
                .button:before {
                     content: ' ';
                     position: absolute;
                     background: #fff;
                     width: 25px;
                     height: 50px;
                     top: 0;
                     left: -45px;
                     opacity: 0.3;
                     -webkit-transition: all 0.6s ease-out;
                     transition: all 0.6s ease-out;
                     -webkit-transform: skewX(-25deg);
                             transform: skewX(-25deg);
                } 
                .button:hover {
                     background: #26C281;
                }
                .button:hover:before {
                     width: 45px;
                     left: 205px;
                }
        </style>
        
    </head>
    <body>
        <a class="button" href="#">来划我啊</a>
    </body>
</html>