前端 - 按钮hover效果-PHP中文网问答

今天看一个网站的按钮效果不错就试着做了一下，可是怎么也不出效果，大家看下问题在哪里。
a标签没有添加overflow: hidden;效果是正常，以添加这个属性就出错了(背景不能完全覆盖)，要点一下才正常，但是如果换成别的标签，即使点击也不会正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        a {width: 300px;height:80px;margin:100px auto;display:block;border: 2px solid #000000;color: #000000;text-align:center;line-height:80px;text-decoration: none;position:relative;overflow: hidden;}
        a:before {content: '';position:absolute;}
        a:after {content: '';background-color:lightgreen;width: 200%;height: 0%;position:absolute;top:50%;left:50%;transform: translateX(-50%) translateY(-50%) rotate(45deg);transition: all 0.4s;z-index:-1;}
        a:hover {color:#ffffff;}
        a:hover:after {height: 400%;transform: translateX(-50%) translateY(-50%) rotate(45deg);}
    </style>
</head>
<body>
    <p>
        <a href="#">
        这是一个按钮
        </a>
    </p>
</body>
</html>

http://insights.thoughtworkers.org
就是这个页面上的按钮效果