9种纯CSS3鼠标滑过彩色按钮动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 9种纯CSS3鼠标滑过彩色按钮动画特效
9种纯CSS3鼠标滑过彩色按钮动画特效
分享:

    插件介绍

    这是一组使用纯CSS3制作的效果很酷的鼠标滑过彩色按钮动画特效。这组按钮特效共9种不同的效果,它们分别通过修改按钮的background-size属性和伪元素的宽度来实现各种动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-03-31
    阅读:
麦子学院
简要教程

这是一组使用纯CSS3制作的效果很酷的鼠标滑过彩色按钮动画特效。这组按钮特效共9种不同的效果,它们分别通过修改按钮的background-size属性和伪元素的宽度来实现各种动画效果。

使用方法

HTML结构

特效中所有的按钮都使用标准的按钮元素来制作。

<button class="btn-1">Button 1</button>
<button class="btn-2">Button 2</button>
<button class="btn-3">Button 3</button>
<button class="btn-4">Button 4</button>
<button class="btn-5">Button 5</button>
<button class="btn-6">Button 6</button>
<button class="btn-7">Button 7</button>
<button class="btn-8">Button 8</button>
<button class="btn-9">Button 9</button>             
                
CSS样式

首先为按钮元素设置基本样式:通过padding值来设置按钮的尺寸,设置2个像素的边框及10个像素的圆角效果。按钮的背景和外边框都去掉,并设置0.5秒的动画过渡。

button {
  margin: 30px 20px;
  padding: 15px 20px;
  border-radius: 10px;
  border: 2px solid;
  font: 16px 'Open Sans', sans-serif;
  text-transform: uppercase;
  background: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: all .5s;
  transition: all .5s;
}  
                

第一种鼠标滑过按钮的动画效果是通过修改按钮的background-size和按钮的颜色来实现的。开始时按钮设置浅绿色的边框颜色和文字颜色,并为按钮背景设置一个线性渐变,但是background-size属性设置为0% 100%,使背景渐变开始时位于按钮左侧的外部,是看不见的。

.btn-1 {
  color: #A3F7BF;
  border-color: #A3F7BF;
  background: -webkit-linear-gradient(left, #a3f7bf, #a3f7bf) no-repeat;
  background: linear-gradient(to right, #a3f7bf, #a3f7bf) no-repeat;
  background-size: 0% 100%;
}                 
                

当鼠标滑过按钮时,background-size属性被设置为100% 100%,背景渐变平滑的从左侧移动出来。同时按钮的文字颜色被修改为深灰色。

.btn-1:hover {
  background-size: 100% 100%;
  color: #27323A;
}                  
                

第3种鼠标滑过按钮的效果与第一种类似,但是它的实现方式是通过按钮的伪元素来实现。

.btn-3 {
  color: #FFD460;
  border-color: #FFD460;
  position: relative;
  overflow: hidden;
}
.btn-3:before {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 0;
  height: 100%;
  background-color: #FFD460;
  z-index: -1;
  -webkit-transition: all .5s;
  transition: all .5s;
}                  
                

在鼠标滑过时修改按钮的文字颜色和按钮:before伪元素的宽度。

.btn-3:hover {
  color: #27323A;
}
.btn-3:hover:hover:before {
  width: 110%;
}                  
                

其它鼠标滑过按钮的效果的实现代码请参考下载文件。

网友评论