javascript - 这样的css 按钮效果怎么实现

Question

浏览网页看到这个按钮的效果很好奇，自己扒不下来，有没有大神给个思路。
{{我不是借贷宝的拖，只是看上这个按钮了}}
这是效果地址

Answer 1

给个思路，判断鼠标移入的方向。

你可以看看这个案例：javascript中判断鼠标移入p容器的方向

Answer 2

这个按钮用了 JavaScript，本质上里面有一个单独的层作为 hover 后的效果，但是它会判断鼠标是从哪个方向 hover 进来的，据此改变 hover 效果层的初始状态及其动画效果。

效果是很唬人，但是就为了一个按钮搞这么个东西感觉有点闲的慌。现在更流行纯 CSS 的方式（或者带 SVG 配合的方案），给你两个资源参考参考：

http://tympanus.net/Development/CreativeButtons/

http://tympanus.net/Development/ButtonStylesInspiration/

Answer 3

这按钮有什么特别。。。

Answer 4

推荐使用http://buttoncssgenerator.com ，可以生成各种效果的按钮css，包括圆角、渐进颜色、阴影，并兼容各大主流浏览器

Answer 5

看这个吧，应该是你想要的http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503021450.html?utm_source=tuicool