按钮图标
纯CSS3鼠标滑过按钮流光效果
PetitQ
这是一款效果非常炫酷的纯 CSS3 鼠标滑过按钮流光效果。当用户用鼠标滑过按钮的时候，一道流光会瞬间滑过按钮，就像玻璃的反光效果，非常漂亮。
HTML 结构
该效果中的按钮是一个超链接<a>元素。
也想出现在这里？联系我们吧
<a class="button" href="#">Link</a>
CSS 样式
将超链接元素制作为块级元素或内联块级元素，为它设置相对定位方式。并为按钮设置一个宽度和高度，背景颜色和前景颜色。为了让流光在按钮之外看不见，必须设置一个 overflow:hidden;属性。最后为按钮的过渡动画设置 0.15 秒的
ease-in效果。
.button {
display: block;
position: relative;
background: #00B16A;
color: #fff;
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
font-weight: bold;
text-decoration: none;
margin: 50px auto 0;
border-radius: 2px;
overflow: hidden;
-webkit-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
流光使用按钮的:before 伪元素来制作，它使用绝对定位，它是一个白色的矩形，开始时位于按钮之外，由于按钮设置了 overflow:hidden;属性，所以开始时它是不可见的。然后通过 skewX()函数将它倾斜 25 度，并设置 0.25 秒的 ease-out 过渡动画效果。
.button:before {
content: ' ';
position: absolute;
background: #fff;
width: 25px;
height: 50px;
top: 0;
left: -45px;
opacity: 0.3;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
在鼠标滑过按钮时，按钮的背景颜色发生变化。同时修改:before 伪元素的宽度和 left 属性，使流光滑过按钮。
.button:hover {
background: #26C281;
}.button:hover:before {
width: 45px;
left: 205px;
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
