10个好看的创意按钮把 CSS HOVER 结合起来

0
回复
73
查看
[复制链接]

699

主题

858

帖子

2808

积分

管理员|UID:1

图云币:184

图云豆:1252

图云钻:0

发表于 2018-11-28 13:31:16 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
CSS hover 样式很简单,但是想创造出有意思、实用、有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击、悬停的相关特效,以便大家获得更好的创造灵感。
今天我们整理了10组网页按钮的点击与悬停效果,每组都有不同的特色以及创意性,下面达人将特效录制成 GIF 动图,方便大家在线观看,若想看真实源代码的,可以点击「查看演示」的链接进行查看。
空间感很强的按钮特效
当你的鼠标在按钮上左右晃动时,按钮会自动带有一些3D旋转的空间感,看起来很有科技感啊,该按钮使用 CSS 和 JS 实现。
点击涟漪效果
这是 Material Design 的按钮点击风格,点击时带有一个波纹涟漪效果,而且还有一个特色就是,按钮使用了渐变颜色,让按钮更加形象突出。
泡沫按钮效果
当鼠标经过按钮时,按钮会出现像「分离」的效果,很好看,需要 SVG 与 JS 结合才能实现。
遮罩效果按钮
线按钮样式动画
动画线条是使用 background-image: repeating-linear-gradient()实现的,再通过动画@keyframes和 background-position属性来让线条动起来。
Weeeeee
这个动画录制时出现些问题,建议大家直接看在线演示。
Shiney 按钮
这种按钮相当不少用户看过,实现方法是半透明的高光样式,然后通过@keyframes和transform 旋转45度来实现。
斑点按钮
会倾斜的按钮
当鼠标向左点击的时候,按钮会向左边微斜,点击右边会就向边倾斜……
电波按钮
鼠标悬停到按钮上时,按钮像很不稳定一样,随时消失……
button-hover-and-click-1.gif

图品云,全网领先的设计师资源下载基地!PSD素材模板、PNG免扣素材、高清背景图库、PPT商业模板,网站模板与源码,建站技术,SEO,软件工具等实用的技术教程大全!! 【通告】近期发现部分竞争网站和小人诋毁抹图品云,对此,我们只有一句话,事实胜于雄辩!用心为站长服务,图品云不怕任何邪门歪道!【一世网宣:官方网站www.gpic8.com,请谨防假冒网站! 官方群:253336833 欢迎进群讨论】图品云举报邮箱:2336957694@qq.com 严禁一切淫秽、涉赌、政治、钓鱼、诈骗、金融理财、借贷、封建迷信等非法人员使用
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

国内海量素材论坛免费下载
全国免费热线电话

暂时没有

周一至周日9:00-23:00

反馈建议

2336957694@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 图品云论坛|网站地图