按钮背景过渡css3,使用CSS3点击按钮实现背景渐变动画的效果

这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感兴趣的朋友们下面来一起看看吧。

效果图如下：

实例代码如下：

css3给按钮添加背景渐变动画

button {

color:#FFF;

font-size:16px;

outline:none;

width:300px;

height:48px;

background:#26A1D9;

border:none;

-webkit-border-radius:5px;

border-radius:5px;

}

button:active{

outline:none;

background:#208FC1;

/*执行动画*/

-webkit-animation:showBtn 0.5s 1;

animation:showBtn 0.5s 1;

/*停止在最后一帧*/

-webkit-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

/*

定义动画

*/

&#