按钮图标

纯CSS3鼠标滑过按钮动画特效

阿里云


这是一款使用纯 CSS3 制作的炫酷鼠标滑过按钮动画特效。这组按钮特效共 5 种效果,分别是按钮边框动画,上下边框动画,浮雕效果,流光效果和光波效果。这 5 种按钮鼠标滑过特效不仅效果酷,而且代码简单,非常实用。

HTML 结构

在第一种按钮鼠标滑过特效中,使用的是 SVG 线条动画来制作按钮的边框动画。它的 HTML 结构如下:

也想出现在这里?联系我们
创客主机
  1. <a href="#" class="btn btn-1">
  2.   <svg>
  3.     <rect x="0" y="0" fill="none" width="100%" height="100%"/>
  4.   </svg>
  5.  Hover
  6. </a>

其它几种效果的 HTML 结构都是基本相同的。

  1. <a href="#" class="btn btn-2">Hover</a> 
  2. <a href="#" class="btn btn-3">Hover</a> 
  3. <a href="#" class="btn btn-4"><span>Hover</span></a> 
  4. <a href="#" class="btn btn-5">Hover</a>

CSS 样式

首先为按钮和它的父容器设置一些通用的 CSS 样式。

  1. .buttons {
  2.   display: table;
  3.   height: 100%;
  4.   width: 100%;
  5. }
  6.  
  7. .container {
  8.   display: table-cell;
  9.   padding: 1em;
  10.   text-align: center;
  11.   vertical-align: middle;
  12. }
  13. .btn {
  14.   color: #fff;
  15.   cursor: pointer;
  16.   display: block;
  17.   font-size: 16px;
  18.   font-weight: 400;
  19.   line-height: 45px;
  20.   margin: 0 auto 2em;
  21.   max-width: 160px;
  22.   position: relative;
  23.   text-decoration: none;
  24.   text-transform: uppercase;
  25.   vertical-align: middle;
  26.   width: 100%;
  27. }
  28. .btn:hover {
  29.   text-decoration: none;
  30. }

第一种按钮鼠标滑过效果是使用 CSS 来驱动 SVG 进行动画,IE10 及以下的浏览器不支持第一种特效。关于 SVG 动画可以参考这里。

  1. .btn-1 {
  2.   background: #e02c26;
  3.   font-weight: 100;
  4. }
  5. .btn-1 svg {
  6.   height: 45px;
  7.   left: 0;
  8.   position: absolute;
  9.   top: 0;
  10.   width: 100%;
  11. }
  12. .btn-1 rect {
  13.   fill: none;
  14.   stroke: #fff;
  15.   stroke-width: 2;
  16.   stroke-dasharray: 422, 0;
  17. }
  18.  
  19. .btn-1:hover {
  20.   background: rgba(225, 51, 45, 0);
  21.   font-weight: 900;
  22.   letter-spacing: 1px;
  23. }
  24. .btn-1:hover rect {
  25.   stroke-width: 5;
  26.   stroke-dasharray: 15, 310;
  27.   stroke-dashoffset: 48;
  28.   -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  29.           transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  30. }

其它几种鼠标滑过按钮特效的 CSS 样式也十分简单,具体请参考下载文件的 styles.css 文件。

纯 CSS3 鼠标滑过按钮动画特效

已有 398 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!