栗子

html

<div class="beian">
<a href="#">22222222222222</a>
</div>


css

.beian{display: inline-block;background: #dddddd;width: 100px;position: relative;overflow: hidden;}
.beian:before {-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;content: "";display: block;}
.beian:before {width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;}
.beian:hover:before {box-shadow: 0 0 0 1000px #36bc99;}
.beian a { display: block;position: relative;z-index: 2;color: #000;font-size: 14px;}
.beian:hover a { color: #fff;z-index: 2 }