纯CSS3方形圆角立体质感按钮

作者:dante_wd 发布时间:2019-09-20 12:47:42


告别简单乏味的页面按钮样式,赋予每一个按钮灵魂,那就是让它立体化,让人见了就想有点击的想法。


最简单的css处理就是加box-shadow,例如:

box-shadow: inset 0 0.3rem 0.2rem rgba(255,255,255,.2), inset 0 -0.3rem 0.2rem rgba(0,0,0,.2), 0 0.2rem 0.4rem rgba(0,0,0,.2);


image.png


再加上些背景色,立马效果就出来了,活生生的感觉。


下边分享一个demo地址:http://littleworld.wang/public/demo/btncss.html

大家可以参考学习。


image.png

image.png

关于我 |  合作伙伴 |  用户注册 |  帮助中心 |  版权声明