效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3095.htm
html:
<ul class="btn">
<li class="btn1">
<div></div>
<span>你说人生艳丽我没有异议</span>
</li>
<li class="btn2">
<div></div>
<span>你说人生忧郁我不言语</span>
</li>
<li class="btn3">
<div></div>
<span>只有默默的承受这一切</span>
</li>
<li class="btn4">
<div></div>
<span>承受数不尽的春来冬去</span>
</li>
<li class="btn5">
<div></div>
<span>有相聚也有分离</span>
</li>
</ul>
css:
.btn{list-style: none;padding: 30px; 300px;margin: 0 auto;}
.btn li{ 200px;height: 50px;border: 2px solid #53C2D6;margin-top: 20px;cursor: pointer;position: relative;overflow: hidden;}
.btn li div{background: #53C2D6;transition: 0.3s ease-in-out;position: absolute;z-index: 1;opacity: 0.9;}
.btn li span{ 200px;height: 50px;position: absolute; line-height: 50px;text-align: center; color: #53C2D6;z-index: 2;;}
.btn li:hover span{color: #fff;}
.btn .btn1 div{ 220px;height: 200px;border-radius: 50%;top: -75px;left: -10px;transform: scale(0);}
.btn .btn1:hover div{transform: scale(1);}
.btn .btn2 div{ 200px;height: 50px;top: 0;left: 0;transform: rotateX(90deg);}
.btn .btn2:hover div{transform: rotateX(0);}
.btn .btn3 div{ 200px;height: 200px;left: 0;top: -75px;transform: rotateZ(-45deg) rotateY(90deg);}
.btn .btn3:hover div{transform: rotateZ(-45deg) rotateY(0);}
.btn .btn4 div{ 200px;height: 200px;left: 0;top: -75px;transform: rotateZ(45deg) rotateY(90deg);}
.btn .btn4:hover div{transform: rotateZ(45deg) rotateY(0);}
.btn .btn5 div{ 200px;height: 50px;top: 0;left: 0;transform: rotateY(90deg);}
.btn .btn5:hover div{transform: rotateY(0);}