<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; cursor: pointer; margin: 5px;}.button span {
cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}.button span:after {
content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}.button:hover span {
padding-right:30px; // 这一句实现了， button本来的字和新出现的» 一起动。 如果把span 删了， 看起来很不同步}.button:hover span:after {
opacity: 1; right: 0;}</style></head><body><h2>按钮动画</h2>
<button class="button" style="vertical-align:right"><span>Hover </span></button>
</body>
</html>
http://www.runoob.com/try/try.php?filename=trycss_buttons_animate1