原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ，基本原理是利用了 hover，background-position 和 transition 三个属性。
原文给出的实现细致完整，但是对于理解关键的实现原理不便，我按照原文的思路给出一种简单实现，效果可以可见 http://jsbin.com/UbIJUfA/1/ 。
代码如下（这段代码只能在Chromium类浏览器工作）：
<!DOCTYPE html> <html> <style> .btn { padding: 10px 20px; background-color: rgb(0, 162, 255); background-image: url("http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/buttons/button_bg.png"); background-position:bottom left; -webkit-transition: background-position 1s; } .btn:hover{ background-position:top left; } </style> <p><a href="javascript:;" class="btn">Here!</a></p> </html>
实现原理简单说来：
首先是使用hover伪类和background-position，使得按钮在鼠标滑入和滑出时按钮背景产生“变化”，然后是用transition属性把这个变化“放慢”从而产生“动画”。hover常被用来产生对鼠标滑过的感应动画效果。在本例中，background-image是一张尺寸比较大的带气泡图案的图片，hover的作用是设定background-position属性，让鼠标滑入时背景图片的显示区域从底部（bottom）移动到顶部（top），滑出时相反。由于hover对属性的修改是瞬间完成的，所以需要配合transition的“减速”作用（当然实际情况可能是浏览器做为此生成了补间动画）。
在原文中，作者还设置了其他属性使得按钮更美观和具有普适性，还有些代码是为了兼容多种浏览器，因此其余部分代码也是值得学习研究一番的。