魔幻般冒泡背景的CSS3按钮动画

这是一款非常有特点的CSS3按钮，按钮的背景不是北京图片，也不是单纯的颜色，而是一组魔幻般的冒泡背景动画。当我们将鼠标滑过按钮时，按钮的冒泡背景动画就可以展示出来。可以说这款CSS3按钮的设计风格相当有创意，而且令人惊叹的是，这些动画都是用CSS3实现的，并没有使用JavaScript，非常强大。

HTML代码：

XML/HTML Code复制内容到剪贴板

<div id="buttonContainer">  
  
    <a href="#" class="button big blue">Big Button</a>  
    <a href="#" class="button big green">Big Button</a>  
    <a href="#" class="button big orange">Big Button</a>  
    <a href="#" class="button big gray">Big Button</a>  
  
    <a href="#" class="button blue medium">Medium Button</a>  
    <a href="#" class="button green medium">Medium Button</a>  
    <a href="#" class="button orange medium">Medium Button</a>  
    <a href="#" class="button gray medium">Medium Button</a>  
  
    <a href="#" class="button small blue">Small Button</a>  
    <a href="#" class="button small green">Small Button</a>  
    <a href="#" class="button small blue rounded">Rounded</a>  
  
    <a href="#" class="button small orange">Small Button</a>  
    <a href="#" class="button small gray">Small Button</a>  
  
    <a href="#" class="button small green rounded">Rounded</a>  
  
</div>  

CSS代码：

CSS Code复制内容到剪贴板

.button{   
 font:15px Calibri, Arial, sans-serif;