button按钮样式_用纯CSS做简单的动态按钮，一步一步超简单【212】

• 这是一个简单的，带有动态效果的按钮，纯CSS做。

图1

一、我们先做一个按钮。

图2

图3

二、按钮很丑，我们修改一下吧，加个样式，这样就好看很多了。

图4

图5

三、按钮好看了，我们加个简单的动态吧，就是当鼠标在按钮上面时，button这个词向左移一些。

图6

图7

四、如图7有动态了，但这个动态太生硬，我们让这个span的动态过渡持续0.5秒，再看一下效果。

图8

图9

五、图7和图9对比再明显不过了，接下来我们在span后面加"»"符号。

图10

图11

六、先把符号透明度变成0，就是透明的意思。

图12

图13

七、加入动态，当鼠标在按钮上面时，»符号出现。

图14

图15

八、你会发现»符号出现得有些生硬，透明到不透明间没有过渡，我们给它加个过渡吧。

图16

图17

---

 Document Button