CSS3红橙黄绿不同颜色按钮

收藏

分享一套漂亮的不同背景颜色按钮，鼠标悬浮上面，有过渡延迟发光效果，完全通过css3属性，不依赖jQuery插件。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入按钮样式playground.css

<link href="playground.css" media="all" rel="stylesheet" type="text/css" />

定义不同背景颜色按钮css3过渡效果

.green.button{-webkit-animation-name: greenPulse; -webkit-animation-duration: 3s;} .blue.button{-webkit-animation-name: bluePulse; -webkit-animation-duration: 4s;} .red.button{-webkit-animation-name: redPulse; -webkit-animation-duration: 1s;} .magenta.button{-webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s;} .orange.button{-webkit-animation-name: orangePulse; -webkit-animation-duration: 3s;} .orangellow.button{-webkit-animation-name: orangellowPulse; -webkit-animation-duration: 5s;}

HTML

Look at me! Click me! Hi ho, Silver! Look at me! I'm Glowing! Hi ho, Silver!