UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

30种炫酷CSS鼠标滑过按钮特效

所属分类：UI-悬停

 53909  558  查看评论 (6)
分享到微信朋友圈
X
30种炫酷CSS鼠标滑过按钮特效 ie兼容10
 查看演示  立即下载

使用方法

1、解压后复制css文件夹下的main.css到项目的css文件夹

2、复制js文件夹下的jquery-2.1.1.min到项目的js文件夹

3、引用css文件

<link rel="stylesheet" type="text/css" href="css/main.css" />

4、引用jquery

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

5、创建按钮

按钮通过div实现，在需要创建按钮的地方插入??

<div class="sim-button button1"><span>登录</span></div>

6、具体示例可参考解压根目录下的index.html


相关插件-悬停
查看更多

CSS3圆形图片鼠标经过旋转效果

 CSS3圆形图片鼠标经过旋转效果，图片上有简短标题和说明，兼容主流浏览器
  悬停
 31893  424

C3经过动效

 各种C3鼠标经过动效
  悬停
 33441  497

纯CSS3 可感知方向 3D盒子翻转动画(原创)

 感应鼠标进入方向，向不同的方向翻转
  悬停
 23006  333

鼠标移入展开(原创)

 适用于鼠标移入产品详情展示
  悬停
 24624  360

讨论这个项目（6）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    calazhi 0
    2017/10/31 11:07:16

    很不错的效果

    PS：如果是css3的动画效果的话，应该不需要jquery的呀

    回复
    shinsou 0
    2017/1/6 10:01:22

    非常不错，正在努力学习

    回复
    没见过的海S 0
    2016/12/5 14:12:22
    请问怎样在鼠标悬停的时候，文字能变色？从白变成其他的颜色，  我加在  before或者 hover before 里 都没有用 回复
    ztt_tongchuan 0
    2016/12/2 13:12:01
    这个效果还不错 回复
    HuHuaChuan 0
    2016/11/30 10:11:24
    不用引入jQuery吧，根本就没用到，你这使用方法误导人啊
        　　　　　0
        2017/2/28 16:34:34

        貌似是的 css3的效果

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复