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


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

效果截图

css3动画 JavaScript

沉默爆破手 9 years, 5 months ago

这按钮有什么特别。。。

风子是风夜 answered 9 years, 5 months ago

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

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

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

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

夏洛特.德诺阿 answered 9 years, 5 months ago

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

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

myllll answered 9 years, 5 months ago

Your Answer