今天来实现一个按钮的动画效果：全部为css
动画前的效果为：
动画后的效果为：
接下来讲一下怎么实现这个小效果：
首先是一个button，button里面包含一个span标签，span里面写一个“hover”然后设置button为行内块级元素，设置圆角，设置一个transtion转换效果设置span标签为行内块级元素，position: relative;，transform的转换效果在span标签后设置一个after，after是可以在此元素后追加一个content，并且可以设置样式，透明度为0将元素隐藏起来最后分别设置元素的hover效果就好了
其中主要用到了transform，after，hover等，有兴趣的小伙伴可以了解下！也可以私聊询问使用方法。
最后附上源码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>按钮动画</title><style>body {text-align: center;}.button {display: inline-block;border-radius: 4px;background-color: #f4511e;border: none;color: #FFFFFF;text-align: center;font-size: 28px;padding: 20px;width: 200px;transition: all 0.5s;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: 25px;}.button:hover span:after {opacity: 1;right: 0;}</style></head><body><h2>按钮动画</h2><button class="button" style="vertical-align:middle"><span>Hover </span></button></body></html>
