CSS3红橙黄绿不同颜色按钮

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

分类：css3 > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

引入按钮样式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

<a class="large green button">Look at me!</a> <a class="large blue button">Click me!</a> <a class="large magenta button">Hi ho, Silver!</a> <a class="large green button">Look at me!</a> <a class="large red button">I'm Glowing!</a> <a class="large magenta button">Hi ho, Silver!</a>