- 这是一个简单的,带有动态效果的按钮,纯CSS做。
![5610b4439b6be9649fe01e28f6bb03ab.gif](https://i-blog.csdnimg.cn/blog_migrate/a64f70c58839fba5fd5438e6c3835b10.gif)
图1
一、我们先做一个按钮。
![eb1bd085fe40a70b23d855a817b02d34.png](https://i-blog.csdnimg.cn/blog_migrate/1a35054476d4689761567b7d3f429133.jpeg)
图2
![dbc4e7569448fc8bcc2b32e35b791dc6.png](https://i-blog.csdnimg.cn/blog_migrate/5ca887e097ccf91d64ba9dca8826212a.jpeg)
图3
二、按钮很丑,我们修改一下吧,加个样式,这样就好看很多了。
![8d38455c318852c58796e3b17f607100.png](https://i-blog.csdnimg.cn/blog_migrate/6cc5410dbeebad3ce189395659bd76f9.jpeg)
图4
![e28996871b4438383627a32524974e08.png](https://i-blog.csdnimg.cn/blog_migrate/f771d42765d845ec53c49f51b31ceec4.jpeg)
图5
三、按钮好看了,我们加个简单的动态吧,就是当鼠标在按钮上面时,button这个词向左移一些。
![1e5df793c525912648cdb621fe1e7937.png](https://i-blog.csdnimg.cn/blog_migrate/8afe4ca649bd9d2ef38b53d975498d45.jpeg)
图6
![ff88d926f1fd4f9507d4074517b03f27.gif](https://i-blog.csdnimg.cn/blog_migrate/9288f7cfac46803d358f6de01ce4fa32.gif)
图7
四、如图7有动态了,但这个动态太生硬,我们让这个span的动态过渡持续0.5秒,再看一下效果。
![135a8189a1554d72d2cd098056b0a421.png](https://i-blog.csdnimg.cn/blog_migrate/13c285f7dd4c0ab1a859aea72a25af1a.jpeg)
图8
![56d8c6d43bffd0ded0dbbaa475bbfe38.gif](https://i-blog.csdnimg.cn/blog_migrate/e7bde2980f50ff4473f8f9e403a7a91a.gif)
图9
五、图7和图9对比再明显不过了,接下来我们在span后面加"»"符号。
![a9ec4f7a75b75d64893bab18b3311291.png](https://i-blog.csdnimg.cn/blog_migrate/2c5e45f7325a3db23831da7cc4cc058d.jpeg)
图10
![21478a44a83d6791696321e0af5a266d.png](https://i-blog.csdnimg.cn/blog_migrate/773c050121e5f9694e49e81d17d4e555.jpeg)
图11
六、先把符号透明度变成0,就是透明的意思。
![cb1134a8f21aff7fc9ca53e1948f7c42.png](https://i-blog.csdnimg.cn/blog_migrate/f4f054d0e1abcd622e476d8c557ce69a.jpeg)
图12
![ee80fbcd255beab531bb53cb58784032.png](https://i-blog.csdnimg.cn/blog_migrate/67dcd73340bbb8958cf11ab2c2a4166f.jpeg)
图13
七、加入动态,当鼠标在按钮上面时,»符号出现。
![8caf330b1d2086bef4558d5213db29f0.png](https://i-blog.csdnimg.cn/blog_migrate/68a0257cef206821f1afec73a6d92da8.jpeg)
图14
![3f1db720428426c58cbbc2c89716ffac.gif](https://i-blog.csdnimg.cn/blog_migrate/aa4184c10cac51715b0a34ee90e54964.gif)
图15
八、你会发现»符号出现得有些生硬,透明到不透明间没有过渡,我们给它加个过渡吧。
![ced2034e6ff99bbc82497bd6190bddb1.png](https://i-blog.csdnimg.cn/blog_migrate/d86d8cbc96ed94062287c742dd20bc1d.jpeg)
图16
![948dc99e37c7e2e52d015e5949e7ea5e.gif](https://i-blog.csdnimg.cn/blog_migrate/43cc602f3920122d61d46c1fb331da15.gif)
图17
Document Button