CSS3的动画泡沫按钮
正如我上面提到的的，泡沫的背景是显示为两个单独的图像，背景位置属性的偏移。使用CSS3的过渡属性，我们定义动画，在这两个版本的背景图片幻灯片的顶部或底部恭恭敬敬，你看到悬停按钮时产生泡沫效应。
现在让我们说几句话的大小和圆润类。
123456789101112131415161718192021222324252627282930313233343536
/* BlueButton */ .blue.button{ color:#0f4b6d!important; border:1pxsolid #84acc3 !important; /* A fallback background color */ background-color:#48b5f2; /* Specifying a version with gradients according to */ background-image: url('button_bg.png'),url('button_bg.png'), -moz-radial-gradient( center bottom,circle, rgba(89,208,244,1)0,rgba(89,208,244,0)100px), -moz-linear-gradient(#4fbbf7,#3faeeb); background-image: url('button_bg.png'),url('button_bg.png'), -webkit-gradient( radial,50% 100%,0, 50%100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear,0% 0%,0% 100%, from(#4fbbf7), to(#3faeeb));} .blue.button:hover{ background-color:#63c7fe; background-image: url('button_bg.png'),url('button_bg.png'), -moz-radial-gradient( center bottom,circle, rgba(109,217,250,1)0,rgba(109,217,250,0)100px), -moz-linear-gradient(#63c7fe,#58bef7); background-image: url('button_bg.png'),url('button_bg.png'), -webkit-gradient( radial,50% 100%,0, 50%100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear,0% 0%,0% 100%, from(#63c7fe), to(#58bef7));}每种颜色的类定义了独特的一套独特的属性 – 按钮的文本标签的颜色，文字阴影和背景图像。注意，我们使用的背景属性按钮添加多个图像。他们是分层的顶部，首先出现在上面定义的。
只有Mozilla和Webkit浏览器目前支持CSS的梯度，但与完全不同的语法。其余的浏览器将显示回退的背景颜色。您可能已经注意到，我们没有包括一个免费版本的渐变规则的前缀。这是由于梯度不是一个CSS规范尚未正式的一部分的事实，并没有首选语法协议。
在上面的片段中，你可以看到，我们定义在它上面的线性渐变和径向之一。为了使渐变交融，更顺利的WebKit和Mozilla的语法，我们定义，这使得外完全透明的渐变颜色的RGBA径向之一。
有了这个，我们的CSS3动画泡沫按钮完成！
这些按钮是完全基于CSS和整合是非常简单 – 只是下降的按钮文件夹在您的项目中的某处。通过修改CSS文件，您可以创建自己的颜色和形状。