请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

1
回复
148
查看
[复制链接]

该用户从未签到

27

主题

28

帖子

160

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
160
2019-10-30 07:27:40 显示全部楼层 |阅读模式

这是一组使用纯CSS3制作的效果很酷的鼠标滑过彩色按钮动画特效。这组按钮特效共9种不同的效果,它们分别通过修改按钮的background-size属性和伪元素的宽度来实现各种动画效果。特效中所有的按钮都使用标准的按钮元素来制作。
  1. <button class="btn-1">Button 1</button>
  2. <button class="btn-2">Button 2</button>
  3. <button class="btn-3">Button 3</button>
  4. <button class="btn-4">Button 4</button>
  5. <button class="btn-5">Button 5</button>
  6. <button class="btn-6">Button 6</button>
  7. <button class="btn-7">Button 7</button>
  8. <button class="btn-8">Button 8</button>
  9. <button class="btn-9">Button 9</button>
复制代码


CSS样式
首先为按钮元素设置基本样式:通过padding值来设置按钮的尺寸,设置2个像素的边框及10个像素的圆角效果。按钮的背景和外边框都去掉,并设置0.5秒的动画过渡。
  1. button {
  2.   margin: 30px 20px;
  3.   padding: 15px 20px;
  4.   border-radius: 10px;
  5.   border: 2px solid;
  6.   font: 16px 'Open Sans', sans-serif;
  7.   text-transform: uppercase;
  8.   background: none;
  9.   outline: none;
  10.   cursor: pointer;
  11.   -webkit-transition: all .5s;
  12.   transition: all .5s;
  13. }  
复制代码


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


  1. .btn-1 {
  2.   color: #A3F7BF;
  3.   border-color: #A3F7BF;
  4.   background: -webkit-linear-gradient(left, #a3f7bf, #a3f7bf) no-repeat;
  5.   background: linear-gradient(to right, #a3f7bf, #a3f7bf) no-repeat;
  6.   background-size: 0% 100%;
  7. }                 
复制代码


当鼠标滑过按钮时,background-size属性被设置为100% 100%,背景渐变平滑的从左侧移动出来。同时按钮的文字颜色被修改为深灰色。
  1. .btn-1:hover {
  2.   background-size: 100% 100%;
  3.   color: #27323A;
  4. }            
复制代码


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


  1. .btn-3 {
  2.   color: #FFD460;
  3.   border-color: #FFD460;
  4.   position: relative;
  5.   overflow: hidden;
  6. }
  7. .btn-3:before {
  8.   content: "";
  9.   position: absolute;
  10.   top: 0;
  11.   right: -5px;
  12.   width: 0;
  13.   height: 100%;
  14.   background-color: #FFD460;
  15.   z-index: -1;
  16.   -webkit-transition: all .5s;
  17.   transition: all .5s;
  18. }                  
复制代码


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


  1. .btn-3:hover {
  2.   color: #27323A;
  3. }
  4. .btn-3:hover:hover:before {
  5.   width: 110%;
  6. }                 
复制代码




更多资源请前往互动精灵资源站
回复

使用道具 举报

TA的每日心情
无聊
2020-3-24 15:33

签到天数: 1 天

[LV.1]初来乍到

2

主题

13

帖子

73

积分

注册会员

Rank: 2

积分
73
2020-3-24 15:29:16 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则