CSS3-transition鼠标hover按钮动画特效

插件介绍
这是一款使用纯CSS3制作的鼠标hover按钮动画特效。该鼠标hover按钮动画特效共15种不同的效果,分别使用css3 transition在鼠标hover按钮,或点击按钮时制作出炫酷的动画效果。

使用方法

在页面中引入font-awesome.min.css文件,general.css是所有按钮的通过文件,必须引入。另外你需要哪种鼠标hover按钮效果,就引入相应的set_n.css文件。

<link href=”path/to/css/font-awesome.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”css/general.css”>
<link rel=”stylesheet” href=”css/set_1.css”>
HTML结构

第一组鼠标hover按钮动画特效的HTML结构如下:

<!–Set 1 start–>
<div class=”container_odd”>
  <div class=”set_container”> <a href=”#” class=”set_1_btn Vbtn-1″> <svg>
    <rect x=”0″ y=”0″ fill=”none” width=”100%” height=”100%”></rect>
    </svg> Hover </a>
    <!–End of Button 1 –>
    <a href=”#” class=”set_1_btn Vbtn-2″>Hover</a>
    <!–End of Button 2 –>
    <a href=”#” class=”set_1_btn Vbtn-3″> <svg>
    <rect x=”0″ y=”0″ fill=”none” width=”100%” height=”100%”></rect>
    </svg> Hover </a>
    <!–End of Button 3 –>
    <a href=”#” class=”set_1_btn Vbtn-4″>Hover</a>
    <!–End of Button 4 –>
    <div style=”clear:both”></div>
  </div>
</div>
<!–Set 1 end–>

每一组鼠标hover按钮动画特效都对应一个CSS文件,例如第一组特效对应set_1.css文件。只需要在页面的<header>中将它引入即可。

该鼠标hover按钮动画特效的官方网址为:http://css3transition.com/button-hover-effect-using-css3

在线预览 网盘下载

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

1条评论

发表评论